Use variables for scrollbar width.

Update language definitions.

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -23,7 +23,7 @@ const Base = styled.div`
         user-select: none;
         align-items: center;
         flex-direction: row;
-        width: calc(100% - 3px);
+        width: calc(100% - var(--scrollbar-thickness));
         color: var(--secondary-foreground);
         background: var(--secondary-background);
     }

src/styles/_elements.scss

@@ -4,8 +4,8 @@
 }
 
 ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
+    width: var(--scrollbar-thickness);
+    height: var(--scrollbar-thickness);
 }
 
 ::-webkit-scrollbar-track {

src/styles/_page.scss

@@ -1,10 +1,10 @@
 * {
-	text-rendering: optimizeLegibility !important;
+    text-rendering: optimizeLegibility !important;
     -webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
 
-    scrollbar-width: thin;
     box-sizing: border-box;
+    scrollbar-width: var(--scrollbar-thickness-ff);
 }
 
 html {

src/styles/_variables.scss

@@ -21,6 +21,8 @@
     --app-height: 100vh;
     --border-radius: 6px;
     --border-radius-half: 50%;
+    --scrollbar-thickness: 3px;
+    --scrollbar-thickness-ff: thin;
 
     --input-border-width: 2px;
     --textarea-padding: 16px;
@@ -33,17 +35,4 @@
     --attachment-max-text-width: 800px;
 
     --bottom-navigation-height: 50px;
-
-    /**
-     * Experimental
-     */
-    --background-rgb: (
-        25,
-        25,
-        25
-    ); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
-    --background-rgba: rgba(
-        var(--background-rgb),
-        0.8
-    ); //make the opacity also customizable
 }