Refactor Edit.astro to include overflow-y scroll in tags container

withstudiocms · Dec 26, 2024 · f245f56 · f245f56
1 parent 3dbf691
commit f245f56
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/studiocms_dashboard/src/components/islands/content-mgmt/Edit.astro b/packages/studiocms_dashboard/src/components/islands/content-mgmt/Edit.astro
@@ -375,6 +375,7 @@ const tagsOptions = [{ label: 'None', value: 'null' }];
             border-radius: 4px;
             padding: 1rem;
             font-size: 1rem;
+            overflow-y: scroll;
         }
     }
 

diff --git a/packages/studiocms_dashboard/src/styles/tiny-mde.css b/packages/studiocms_dashboard/src/styles/tiny-mde.css
@@ -11,6 +11,25 @@
 	border-right: 2px solid hsl(var(--border)) !important;
 	border-bottom: 2px solid hsl(var(--border)) !important;
 	border-left: 2px solid hsl(var(--border)) !important;
+	overflow-y: auto;
+	overflow-x: hidden;
+
+	&::-webkit-scrollbar,
+	&::-webkit-scrollbar-track {
+		background-color: inherit;
+		border-radius: 99px;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	&::-webkit-scrollbar-thumb {
+		background-color: hsl(var(--default-active));
+		border: 4px solid transparent;
+		background-clip: content-box;
+		border-radius: 99px;
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: hsl(var(--default-hover));
+	}
 }
 
 .TMBlankLine {