fix(ui): make scrollbar appearance consistent on all platforms

Author: Keshav-writes-code

apps/app/package.json

@@ -29,6 +29,7 @@
     "svelte-check": "^4.3.5",
     "typescript": "~5.9.3",
     "unocss": "^66.6.0",
+    "unocss-preset-scrollbar": "^3.2.0",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"
   },

apps/app/src/components/main_section/text_editor/index.svelte

@@ -36,7 +36,7 @@
 </script>
 
 <div
-  class="w-full isolate px-8 flex justify-center flex-1 overflow-auto
+  class="w-full isolate px-8 flex justify-center flex-1 overflow-auto scrollbar-setup
 {current_platform_type == 'mobile' && 'pt-22'}
   "
 >

apps/app/src/components/sidebar_section/file_manager/items_renderer.svelte

@@ -127,7 +127,7 @@
     onscroll={() => {
       context_menu.close();
     }}
-    class="
+    class=" scrollbar-setup
       {focused_directory_path == workspace_root_path.data.path &&
       'shadow-[inset_0_0_0_1px_var(--color-accent)]'}
       {drop_target === workspace_root_path.data?.path &&

apps/app/src/styles/global.css

@@ -5,4 +5,13 @@ body {
   --radius-box: 1rem;
   --color-primary: oklch(0.5727 0.1808 294.1);
   --noise: 1;
-}
+}
+.scrollbar-setup::-webkit-scrollbar-thumb {
+  border: 4px solid transparent;
+  background-clip: padding-box;
+}
+.scrollbar-setup::-webkit-scrollbar-thumb:hover {
+  --scrollbar-thumb: color-mix(in srgb, var(--color-base-content) 62%, black);
+  border: 4px solid transparent;
+}
+

apps/app/uno.config.ts

@@ -4,15 +4,21 @@ import { presetIcons } from 'unocss';
 import { presetMini } from 'unocss';
 import { presetDaisyui } from '@0x-jerry/unocss-preset-daisyui';
 import { presetTypography } from 'unocss';
+import { presetScrollbar } from 'unocss-preset-scrollbar';
 export default defineConfig({
   rules: [
     ['capitalize', { 'text-transform': 'capitalize' }],
     ['isolate', { isolation: 'isolate' }],
   ],
+  shortcuts: {
+    'scrollbar-setup':
+      'scrollbar scrollbar-rounded scrollbar-w-3 scrollbar-radius-2 scrollbar-track-radius-4 scrollbar-thumb-radius-4 scrollbar-thumb-color-[color-mix(in_srgb,var(--color-base-content)_32%,black)] scrollbar-track-color-transparent',
+  },
   presets: [
     presetMini(),
     presetIcons(),
     presetDaisyui(),
+    presetScrollbar(),
     presetTypography({
       cssExtend: {
         h2: { 'margin-top': '2rem', 'margin-bottom': '0.5rem' },