fix: improve sidepanel scrollbar and fix quick filters

(cherry picked from commit 7c3088d)

# Conflicts:
#	desk/src/components/view-controls/QuickFilters.vue
#	desk/src/index.css

Author: aerodeval

desk/src/components/frappe-ui/Autocomplete.vue

@@ -18,12 +18,9 @@
               :class="inputClasses"
               @click="() => !disabled && togglePopover()"
             >
-              <div class="flex items-center">
+              <div class="flex items-center min-w-0 flex-1">
                 <slot name="prefix" />
-                <span
-                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-                  v-if="selectedValue"
-                >
+                <span class="text-base leading-5 truncate" v-if="selectedValue">
                   {{ displayValue(selectedValue) }}
                 </span>
                 <span class="text-base leading-5 text-gray-500" v-else>

desk/src/components/view-controls/QuickFilterField.vue

@@ -5,11 +5,11 @@
     type="checkbox"
     :checked="props.value"
     @change.stop="updateFilter(filter, $event.target.checked)"
-    class="w-44"
+    class="w-36"
   />
   <FormControl
     v-else-if="filter.type === 'Select'"
-    class="form-control cursor-pointer [&_select]:cursor-pointer w-44"
+    class="form-control cursor-pointer [&_select]:cursor-pointer w-36"
     type="select"
     :model-value="props.value"
     :options="filter.options"
@@ -22,11 +22,11 @@
     :doctype="filter.options"
     :placeholder="filter.label"
     @change="(data) => updateFilter(filter, data)"
-    class="w-44"
+    class="w-36"
   />
   <component
     v-else-if="['Date', 'Datetime'].includes(filter.type)"
-    class="border-none w-44"
+    class="border-none w-36"
     :is="filter.type === 'Date' ? DatePicker : DateTimePicker"
     :value="props.value"
     @change="(v) => updateFilter(filter, v)"

desk/src/components/view-controls/QuickFilters.vue

@@ -1,8 +1,20 @@
 <template>
+<<<<<<< HEAD
   <div v-if="!quickFilters.loading">
     <FadedScrollableDiv
       class="flex flex-1 items-center -ml-1 flex-wrap gap-2"
       orientation="horizontal"
+=======
+  <FadedScrollableDiv
+    class="quick-filters flex flex-1 items-center -ml-1 overflow-x-auto py-1 gap-2 pr-4"
+    orientation="horizontal"
+    v-if="!quickFilters.loading"
+  >
+    <div
+      v-for="filter in quickFilters.data"
+      :key="filter.name"
+      class="min-w-36 pl-0.5"
+>>>>>>> 7c3088de (fix: improve sidepanel scrollbar  and fix quick filters)
     >
       <div
         v-for="filter in quickFilters.data"
@@ -80,4 +92,12 @@ function getValue(quickFilter, filters) {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.quick-filters {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+.quick-filters::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+</style>

desk/src/index.css

@@ -9,11 +9,43 @@
     @apply break-normal max-w-none prose prose-code:break-all prose-code:whitespace-pre-wrap prose-img:border prose-img:rounded-lg prose-sm;
   }
 }
+
 .tiptap input[placeholder="Add caption"] {
   display: none !important;
 }
 
 html,
 body {
   color: var(--ink-gray-9);
+<<<<<<< HEAD
+=======
+}
+
+/* Modern slim scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--outline-gray-3) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--outline-gray-3);
+  border-radius: 9999px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--outline-gray-4);
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+>>>>>>> 7c3088de (fix: improve sidepanel scrollbar  and fix quick filters)
 }