Some bubble layout fixes

src/scss/partials/_chatBubble.scss

@@ -1024,8 +1024,14 @@ $bubble-beside-button-width: 38px;
       }
     }
 
-    .webpage-name {
+    .webpage-name,
+    .text,
+    .title {
       font-size: var(--messages-secondary-text-size);
+      line-height: var(--messages-secondary-line-height);
+    }
+    
+    .webpage-name {
       text-decoration: none;
       
       @include hover() {
@@ -1036,7 +1042,6 @@ $bubble-beside-button-width: 38px;
     .text {
       word-break: break-word;
       margin-top: 1px;
-      font-size: var(--messages-secondary-text-size);
     }
 
     .quote {
@@ -1064,7 +1069,6 @@ $bubble-beside-button-width: 38px;
     }
   }
   
-  .web, 
   .reply {
     font-size: var(--messages-secondary-text-size);
   }
@@ -1834,13 +1838,12 @@ $bubble-beside-button-width: 38px;
   .name {
   // &-content > .name, 
   // .document-wrapper > .name {
-    /* padding: .2675rem 9px 0 9px; */
+    padding: .3125rem .625rem 0 .625rem;
-    /* padding: .32rem 9px 0 9px; */
-    padding: 5px 9px 0 9px;
     font-weight: 500 !important;
     /* padding-bottom: 4px; */
     color: var(--primary-color);
-    font-size: .9rem;
+    font-size: .875rem;
+    line-height: 1.25rem;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;

src/scss/partials/_chatPinned.scss

@@ -151,8 +151,8 @@
   
   &-title, 
   &-subtitle {
-    font-size: 14px;
+    font-size: var(--font-size-14);
-    line-height: var(--line-height);
+    line-height: var(--line-height-14);
 
     @include text-overflow();
   }
@@ -484,7 +484,7 @@
 
   &-subtitle {
     .animated-super-row {
-      font-size: .875rem;
+      font-size: var(--font-size-14);
       line-height: 16px;
       overflow: hidden;
       white-space: nowrap;
@@ -630,8 +630,8 @@
 
   &-title, 
   &-subtitle {
-    font-size: .875rem;
+    font-size: var(--font-size-14);
-    line-height: var(--line-height);
+    line-height: var(--line-height-14);
     width: 100%;
     max-width: 100%;
 

src/scss/partials/_leftSidebar.scss

@@ -648,9 +648,9 @@
 
   .row {
     .btn-primary {
-      height: 30px;
+      height: 1.875rem;
-      padding: 0 12px;
+      padding: 0 .75rem;
-      font-size: 15px;
+      font-size: .9375rem;
       width: auto;
       transition: width 0.2s;
       margin: 0;
@@ -658,7 +658,8 @@
       right: 1rem;
       top: 50%;
       transform: translateY(-50%);
-      border-radius: 15px;
+      border-radius: .9375rem;
+      line-height: 1.875rem;
 
       body.animation-level-0 & {
         transition: none;

src/scss/partials/_row.scss

@@ -88,7 +88,8 @@
     }
   }
 
-  .radio-field-main, .checkbox-field {
+  .radio-field-main, 
+  .checkbox-field {
     padding-left: 3.375rem;
     margin-left: -3.375rem;
   }
@@ -100,18 +101,18 @@
     .checkbox-caption {
       padding-left: 0;
     }
-  }
 
-  .checkbox-field-toggle {
+    &-toggle {
       margin: 0;
       margin-right: .125rem;
       padding: 0;
     }
+  }
 
   &-subtitle {
     color: var(--secondary-text-color) !important;
     font-size: .875rem !important;
-    line-height: var(--line-height);
+    line-height: var(--line-height-14);
     margin-top: .125rem;
     margin-bottom: .0625rem;
     order: 1;
@@ -122,15 +123,15 @@
   }
 
   &-media {
-    width: 48px !important;
+    width: 3rem !important;
-    height: 48px !important;
+    height: 3rem !important;
     position: absolute !important;
     margin: 0 !important;
     left: .5rem;
 
     &-small {
-      width: 32px !important;
+      width: 2rem !important;
-      height: 32px !important;
+      height: 2rem !important;
       left: .75rem !important;
     }
   }

src/scss/style.scss

@@ -80,7 +80,12 @@ $chat-input-inner-padding-handhelds: .25rem;
   --messages-container-width: #{$messages-container-width};
   --messages-text-size: 16px;
   --messages-secondary-text-size: calc(var(--messages-text-size) - 2px);
+  --messages-secondary-line-height: calc(var(--messages-secondary-text-size) + 4px);
   --line-height: 1.3125;
+  --line-height-16: 21px;
+  --line-height-14: 18px;
+  --font-size-16: 16px;
+  --font-size-14: 14px;
   --esg-sticker-size: 80px;
   --disabled-opacity: .3;
   --round-video-size: 280px;