fix(ui): improve mobile responsiveness and layout scaling

apps/rowboat/app/globals.css

@@ -10,12 +10,33 @@
 @reference 'tailwindcss';
 
 @layer utilities {
+  
+  /* for hig DPI windows display */
+  *{
+    box-sizing: border-box;
+  }
+  
   .text-balance {
     text-wrap: balance;
   }
   .custom-scrollbar {
     scrollbar-width: thin;
     scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+
+    /* for different browsers */
+    &::-webkit-scrollbar{
+      width: 4px;
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-track{
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb{
+      background-color: rgba(156, 163, 175, 0.3);
+      border-radius: 4px;
+    }
   }
 
   .custom-scrollbar::-webkit-scrollbar {
@@ -121,8 +142,24 @@ html, body {
 
 html {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
+
+  /*For Windows font smoothing and windows compatible*/
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
+/* Windows font rendering fix */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  body {
+    -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased
+  }
+}
 body {
   background: var(--background);
   color: var(--foreground);