Dark theme scrollbar fix

metalmon · Dec 23, 2024 · 3465585 · 3465585
1 parent a19f939
commit 3465585
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
@@ -34,7 +34,7 @@
               <template #target="{ open }">
                 <Button
                   :label="data[field.name]"
-                  class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+                  class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 dark-scrollbar"
                 >
                   <div v-if="data[field.name]" class="truncate">
                     {{ data[field.name] }}
@@ -55,7 +55,7 @@
               </template>
               <template #body>
                 <div
-                  class="my-2 p-1.5 min-w-40 space-y-1.5 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  class="my-2 p-1.5 min-w-40 space-y-1.5 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none dark-scrollbar"
                 >
                   <div>
                     <DropdownItem

diff --git a/frontend/src/styles/scrollbar.css b/frontend/src/styles/scrollbar.css
@@ -8,30 +8,35 @@
  */
 
 /* Firefox scrollbar styling */
-.dark-scrollbar {
+.dark-scrollbar,
+[data-popper-placement] > div {
   scrollbar-width: thin;
   scrollbar-color: rgba(82, 82, 91, 0.3) transparent;
 }
 
 /* Webkit scrollbar styling */
-.dark-scrollbar::-webkit-scrollbar {
+.dark-scrollbar::-webkit-scrollbar,
+[data-popper-placement] > div::-webkit-scrollbar {
   width: 8px;  /* vertical scrollbar width */
   height: 8px; /* horizontal scrollbar height */
 }
 
 /* Controls the scrollbar track (background) */
-.dark-scrollbar::-webkit-scrollbar-track {
+.dark-scrollbar::-webkit-scrollbar-track,
+[data-popper-placement] > div::-webkit-scrollbar-track {
   background: transparent;
 }
 
 /* Controls the scrollbar thumb (draggable part) */
-.dark-scrollbar::-webkit-scrollbar-thumb {
+.dark-scrollbar::-webkit-scrollbar-thumb,
+[data-popper-placement] > div::-webkit-scrollbar-thumb {
   background-color: rgba(82, 82, 91, 0.3);
   border-radius: 4px;
 }
 
 /* Hover state for the scrollbar thumb */
-.dark-scrollbar::-webkit-scrollbar-thumb:hover {
+.dark-scrollbar::-webkit-scrollbar-thumb:hover,
+[data-popper-placement] > div::-webkit-scrollbar-thumb:hover {
   background-color: rgba(82, 82, 91, 0.5);
 }