Convert all em units to rem for consistent sizing

Author: rubenhensen

src/lib/components/Chip.svelte

@@ -55,7 +55,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        gap: 0.35em;
+        gap: 0.35rem;
         border-radius: var(--pg-border-radius-md);
         font-family: var(--pg-font-family);
         color: var(--pg-text);
@@ -97,8 +97,8 @@
     }
 
     .chip-lg {
-        padding: 0.2em 1em;
-        font-size: 0.95em;
+        padding: 0.2rem 1rem;
+        font-size: 0.95rem;
     }
 
     /* Variant: default (white background, light border) */

src/lib/components/HelpToggle.svelte

@@ -80,7 +80,7 @@
     }
 
     .help-section.bordered .help-content {
-        margin: 0 1em 1rem 2.2rem;
+        margin: 0 1rem 1rem 2.2rem;
     }
 
     .help-text {

src/lib/components/LocaleSwitcher.svelte

@@ -81,7 +81,7 @@
     height: auto;
     font-size: 16px;
     line-height: 1;
-    margin: 1em 0;
+    margin: 1rem 0;
     align-content: center;
     align-items: center;
   }

src/lib/components/ThemeSwitcher.svelte

@@ -99,7 +99,7 @@
     height: auto;
     font-size: 16px;
     line-height: 1;
-    margin: 1em 0;
+    margin: 1rem 0;
     align-content: center;
     align-items: center;
   }

src/lib/components/fallback/Email.svelte

@@ -106,7 +106,7 @@
     #sidebar {
         overflow: scroll;
         border-right: 1px solid;
-        width: 20em;
+        width: 20rem;
     }
 
     #sb-th {
@@ -140,7 +140,7 @@
     }
 
     #buttons {
-        min-width: 6em;
+        min-width: 6rem;
     }
 
     #noemails {

src/lib/components/fallback/EmailView.svelte

@@ -110,7 +110,7 @@
             display: flex;
             align-items: center;
             text-align: left;
-            padding-left: 1em;
+            padding-left: 1rem;
 
             &:not(:last-child, .toolbar) {
                 border-bottom: 2px solid var(--pg-text);
@@ -141,8 +141,8 @@
                 all: unset;
                 cursor: pointer;
                 margin-left: auto;
-                margin-right: 0.5em;
-                margin-top: 0.5em;
+                margin-right: 0.5rem;
+                margin-top: 0.5rem;
             }
         }
 
@@ -171,7 +171,7 @@
                         all: unset;
                         cursor: pointer;
                         font-size: 14px;
-                        padding: 0.5em;
+                        padding: 0.5rem;
                         width: 100%;
                         height: 100%;
                     }

src/lib/components/fallback/ListView.svelte

@@ -50,7 +50,7 @@
         {/each}
     </ol>
 {:else}
-    <div style="margin: auto 3em; text-align: center;">
+    <div style="margin: auto 3rem; text-align: center;">
         <h4>
             {$_('fallback.list.nothing')}
         </h4>
@@ -78,9 +78,9 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        height: 4.5em;
+        height: 4.5rem;
         border-bottom: 1px solid var(--pg-text);
-        padding-left: 0.5em;
+        padding-left: 0.5rem;
 
         button {
             all: unset;
@@ -90,8 +90,8 @@
 
             div {
                 border-radius: 10px;
-                margin: 1em 0.5em 1em 0em;
-                padding-left: 0.25em;
+                margin: 1rem 0.5rem 1rem 0rem;
+                padding-left: 0.25rem;
 
                 &.selected,
                 &:hover,

src/lib/components/fallback/Settings.svelte

@@ -121,20 +121,20 @@
     {/if}
     <button
         on:click|preventDefault={() => (currMode = 'List')}
-        style="float:right; margin-right: 1em"
+        style="float:right; margin-right: 1rem"
     >{$_('fallback.settings.back')}</button
     >
 </div>
 
 <style lang="scss">
   #settings-container {
-    padding: 0 1em 1em 1em;
+    padding: 0 1rem 1rem 1rem;
     width: 100%;
   }
 
   #creds {
     border-collapse: collapse;
-    margin-bottom: 0.5em;
+    margin-bottom: 0.5rem;
   }
 
   #creds td,

src/lib/components/filesharing/Error.svelte

@@ -46,28 +46,28 @@
     .error-title {
         color: var(--pg-input-error);
         font-family: var(--pg-font-family);
-        font-size: 1.5em;
+        font-size: 1.5rem;
         font-weight: 700;
         margin: 0;
     }
 
     .error-message {
         color: var(--pg-text);
         font-family: var(--pg-font-family);
-        font-size: 1em;
+        font-size: 1rem;
         line-height: 1.5;
         margin: 0;
     }
 
     .error-btn {
-        margin-top: 1em;
-        padding: 0.75em 2em;
+        margin-top: 1rem;
+        padding: 0.75rem 2rem;
         background-color: var(--pg-text);
         color: var(--pg-general-background);
         border: none;
         border-radius: var(--pg-border-radius-sm);
         cursor: pointer;
-        font-size: 1em;
+        font-size: 1rem;
         font-family: var(--pg-font-family);
         font-weight: 600;
         transition: all 0.2s ease;

src/lib/components/filesharing/RecipientSelectionFields.svelte

@@ -81,7 +81,7 @@
 <style>
     .crypt-recipient {
         background-color: var(--pg-soft-background);
-        padding: 1em;
+        padding: 1rem;
         border-radius: var(--pg-border-radius-lg);
         border: 1px solid var(--pg-strong-background);
         /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); */
@@ -94,12 +94,12 @@
     }
 
     .crypt-recipient:not(:last-child) {
-        margin-bottom: 0.5em;
+        margin-bottom: 0.5rem;
     }
 
     .recipient-container {
         display: flex;
-        gap: 0.75em;
+        gap: 0.75rem;
         align-items: flex-start;
     }
 
@@ -131,7 +131,7 @@
     }
 
     .field-label {
-        font-size: 0.8em;
+        font-size: 0.8rem;
         font-weight: 800;
         color: var(--pg-text);
         font-family: var(--pg-font-family);
@@ -141,7 +141,7 @@
     .optionals-container {
         display: flex;
         flex-direction: column;
-        gap: 0.5em;
-        margin-top: 0.5em;
+        gap: 0.5rem;
+        margin-top: 0.5rem;
     }
 </style>