Change px attributes to rem

Touches paddings, margins, gaps and line-heights.
Doesn't touch positioning and widths

public/typography.css

@@ -92,8 +92,11 @@ html {
    * otherwise Safari breaks. */
   font-size: var(--font-size);
   font-weight: var(--font-weight-regular);
+}
+
+body {
   /* On Safari this aligns text with different font-faces properly vertically. */
-  line-height: 22px;
+  line-height: 1.375rem;
 }
 
 p {

src/components/Button.svelte

@@ -311,7 +311,7 @@
   .p3-3 {
     grid-area: p3-3;
     background-color: var(--button-color-1);
-    padding: 0 8px;
+    padding: 0 0.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;

src/components/Changes.svelte

@@ -80,8 +80,8 @@
     border-left: 4px solid var(--color-background-default);
   }
   .commit-dot {
-    width: 4px;
-    height: 4px;
+    width: 0.25rem;
+    height: 0.25rem;
     position: absolute;
     top: 0.625rem;
     left: -18.5px;

src/components/CobCommitTeaser.svelte

@@ -48,7 +48,7 @@
     align-items: center;
     gap: 1rem;
     margin-left: auto;
-    height: 21px;
+    height: 1.3125rem;
   }
   .commit-message {
     font-size: var(--font-size-tiny);
@@ -57,7 +57,7 @@
     user-select: text;
   }
   .commit-expand-button {
-    height: 21px;
+    height: 1.3125rem;
     display: flex;
     align-items: center;
   }
@@ -81,7 +81,7 @@
       {#if commit.message.trim() !== commit.summary.trim()}
         <div class="commit-expand-button">
           <NakedButton
-            stylePadding="0 4px"
+            stylePadding="0 0.25rem"
             variant="ghost"
             onclick={e => {
               e.stopPropagation();

src/components/CommitsContainer.svelte

@@ -48,7 +48,7 @@
   <div class="header" class:collapsed={!expanded}>
     <div class="left">
       <NakedButton
-        stylePadding="0 4px"
+        stylePadding="0 0.25rem"
         variant="ghost"
         onclick={async () => {
           expanded = !expanded;

src/components/ConfirmClear.svelte

@@ -20,7 +20,7 @@
 
 <Popover popoverPositionRight="0" popoverPositionTop="2.5rem">
   {#snippet toggle(onclick)}
-    <NakedButton stylePadding="0 4px" variant="ghost" {onclick}>
+    <NakedButton stylePadding="0 0.25rem" variant="ghost" {onclick}>
       <Icon name="broom-double" />
     </NakedButton>
   {/snippet}

src/components/Diff.svelte

@@ -222,7 +222,7 @@
   .container {
     /* Make space for the box-shadow border, otherwise it gets cut off due to
        overflow: hide on the container. */
-    padding: 8px 1px;
+    padding: 0.5rem 0.0625rem;
     font-size: var(--font-size-small);
     font-family: var(--font-family-monospace);
   }
@@ -315,7 +315,7 @@
     display: flex;
     background-color: var(--color-fill-ghost);
     clip-path: var(--1px-corner-fill);
-    padding: 0 8px;
+    padding: 0 0.5rem;
     width: fit-content;
   }
 </style>

src/components/HomeSidebar.svelte

@@ -37,7 +37,7 @@
     display: flex;
     font-size: var(--font-size-small);
     justify-content: space-between;
-    padding: 8px 4px 8px 8px;
+    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
     width: 100%;
   }
   .tab:not(.active) {

src/components/IssueStateButton.svelte

@@ -34,8 +34,8 @@
     font-size: var(--font-size-small);
   }
   .badge {
-    gap: 6px;
-    padding-right: 10px;
+    gap: 0.375rem;
+    padding-right: 0.625rem;
   }
 </style>
 

src/components/IssuesSecondColumn.svelte

@@ -32,7 +32,7 @@
     display: flex;
     font-size: var(--font-size-small);
     justify-content: space-between;
-    padding: 8px 4px 8px 8px;
+    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
     width: 100%;
   }
   .tab:not(.active) {
@@ -128,7 +128,7 @@
         <div
           class="tab"
           style:color="var(--color-foreground-contrast)"
-          style:padding-left="12px">
+          style:padding-left="0.75rem">
           <div class="global-flex"><Icon name="patch" />Patches</div>
           <div class="global-counter">
             {project.meta.patches.draft +

src/components/NakedButton.svelte

@@ -20,7 +20,7 @@
     variant,
     onclick,
     styleHeight = "2rem",
-    stylePadding = "0 8px",
+    stylePadding = "0 0.5rem",
     active = false,
     keyShortcuts,
   }: Props = $props();

src/components/NotificationTeaser.svelte

@@ -212,7 +212,7 @@
     </div>
     <div class="clear-icon">
       <NakedButton
-        stylePadding="0 4px"
+        stylePadding="0 0.25rem"
         variant="ghost"
         onclick={e => {
           e.stopPropagation();

src/components/OutlineButton.svelte

@@ -79,7 +79,7 @@
   }
   .p3-3 {
     grid-area: p3-3;
-    padding: 0 8px;
+    padding: 0 0.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;

src/components/PatchStateButton.svelte

@@ -37,8 +37,8 @@
   }
 
   .badge {
-    gap: 6px;
-    padding-right: 10px;
+    gap: 0.375rem;
+    padding-right: 0.625rem;
   }
 </style>
 

src/components/PatchTeaser.svelte

@@ -84,7 +84,7 @@
     class="patch-teaser"
     style:align-items="flex-start"
     style:clip-path={focussed ? "none" : undefined}
-    style:padding={focussed ? "1rem" : "20px"}
+    style:padding={focussed ? "1rem" : "1.25rem"}
     onclick={async () => {
       if (loadPatch) {
         await loadPatch(patch.id);

src/components/PatchTimeline.svelte

@@ -90,7 +90,7 @@
     gap: 0.25rem;
   }
   .icon {
-    padding-top: 3px;
+    padding-top: 0.1875rem;
   }
 </style>
 

src/components/PatchesSecondColumn.svelte

@@ -31,7 +31,7 @@
     display: flex;
     font-size: var(--font-size-small);
     justify-content: space-between;
-    padding: 8px 4px 8px 8px;
+    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
     width: 100%;
   }
   .tab:not(.active) {
@@ -75,7 +75,7 @@
         <div
           class="tab"
           style:color="var(--color-foreground-contrast)"
-          style:padding-left="12px">
+          style:padding-left="0.75rem">
           <div class="global-flex"><Icon name="issue" />Issues</div>
           <div class="global-counter">
             {project.meta.issues.open + project.meta.issues.closed}

src/components/ReactionSelector.svelte

@@ -36,7 +36,7 @@
     cursor: pointer;
     border: 0;
     background: none;
-    height: 24px;
+    height: 1.5rem;
     clip-path: var(--1px-corner-fill);
     margin: 0;
     font-size: var(--font-size-small);

src/components/RepoCard.svelte

@@ -27,7 +27,7 @@
   }
   .description {
     color: var(--color-fill-gray);
-    margin-top: 4px;
+    margin-top: 0.25rem;
   }
   .container {
     width: 100%;
@@ -38,7 +38,7 @@
   variant={focussed ? "secondary" : "ghost"}
   styleCursor="pointer"
   styleWidth="100%"
-  stylePadding="8px 12px"
+  stylePadding="0.5rem 0.75rem"
   styleOverflow="hidden"
   hoverable
   {onclick}>
@@ -61,10 +61,10 @@
 
     <div class="global-flex footer">
       <div class="global-flex">
-        <div class="global-flex" style:gap="4px">
+        <div class="global-flex" style:gap="0.25rem">
           <Icon name="issue" />{project.meta.issues.open}
         </div>
-        <div class="global-flex" style:gap="4px">
+        <div class="global-flex" style:gap="0.25rem">
           <Icon name="patch" />{project.meta.patches.open}
         </div>
       </div>

src/components/RepoHeader.svelte

@@ -60,9 +60,9 @@
     <div class="global-flex">
       <div
         class="global-counter"
-        style:padding="0 6px"
+        style:padding="0 0.375rem"
         style:background-color="var(--color-fill-ghost)"
-        style:gap="4px">
+        style:gap="0.25rem">
         <Icon name="seedling" />
         {repo.seeding}
       </div>

src/components/RepoTeaser.svelte

@@ -17,9 +17,9 @@
 
   .seeding {
     margin-left: auto;
-    padding: 0 6px;
+    padding: 0 0.375rem;
     background-color: var(--color-fill-ghost);
-    gap: 4px;
+    gap: 0.25rem;
   }
 </style>
 

src/components/RevisionBadges.svelte

@@ -14,7 +14,7 @@
 {#if revision.id === revisions.slice(-1)[0].id}
   <span
     class="global-counter"
-    style:height="22px"
+    style:height="1.375rem"
     style:color="var(--color-foreground-contrast)">
     Latest
   </span>
@@ -22,7 +22,7 @@
 {#if revision.id === revisions[0].id}
   <span
     class="global-counter"
-    style:height="22px"
+    style:height="1.375rem"
     style:color="var(--color-foreground-contrast)">
     Initial
   </span>

src/components/RevisionSelector.svelte

@@ -50,7 +50,7 @@
     margin-bottom: 1rem;
   }
   .icon {
-    min-width: 16px;
+    min-width: 1rem;
   }
 </style>
 
@@ -63,7 +63,7 @@
         e.preventDefault();
         onclick();
       }}
-      stylePadding="0 4px">
+      stylePadding="0 0.25rem">
       <div style:color="var(--color-foreground-contrast)">
         <Icon name="chevron-down" />
       </div>

src/components/Tab.svelte

@@ -30,14 +30,14 @@
     display: flex;
     flex-direction: row;
     font-size: var(--font-size-small);
-    height: 38px;
+    height: 2.375rem;
   }
 
   .wrapper {
     position: relative;
     display: flex;
     gap: 0.5rem;
-    padding: 3px 0;
+    padding: 0.1875rem 0;
     align-items: center;
   }
 

src/components/TextInput.svelte

@@ -83,7 +83,7 @@
     width: 100%;
     height: 100%;
     margin: 0;
-    height: 32px;
+    height: 2rem;
     border: 0;
   }
   input::placeholder {

src/components/VerdictBadge.svelte

@@ -18,8 +18,8 @@
 
 <style>
   .badge {
-    gap: 6px;
-    padding-right: 10px;
+    gap: 0.375rem;
+    padding-right: 0.625rem;
   }
   .no-verdict {
     background-color: var(--color-fill-ghost);

src/views/home/Inbox.svelte

@@ -204,7 +204,7 @@
         styleJustifyContent="center">
         <div
           class="global-flex"
-          style:height="74px"
+          style:height="4.625rem"
           style:justify-content="center">
           <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
             <Icon name="none" />

src/views/home/Onboarding.svelte

@@ -71,7 +71,7 @@
     gap: 1.5rem;
   }
   .tab {
-    height: 24px;
+    height: 1.5rem;
     color: var(--color-foreground-contrast);
   }
   .hint {

src/views/home/Repos.svelte

@@ -175,7 +175,7 @@
           styleJustifyContent="center">
           <div
             class="global-flex"
-            style:height="126px"
+            style:height="7.875rem"
             style:justify-content="center">
             <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
               <Icon name="none" />

src/views/repo/Issues.svelte

@@ -165,7 +165,7 @@
           styleJustifyContent="center">
           <div
             class="global-flex"
-            style:height="84px"
+            style:height="5.25rem"
             style:justify-content="center">
             <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
               <Icon name="none" />

src/views/repo/Patch.svelte

@@ -649,7 +649,7 @@
               {formatOid(patch.id)}
               <span
                 class="global-counter"
-                style:height="24px"
+                style:height="1.5rem"
                 style:color="var(--color-foreground-contrast)">
                 Initial
               </span>