fix: preview: font-size and header layout

mbnuqw · Feb 23, 2024 · f2baa32 · f2baa32
1 parent 5c48dd8
commit f2baa32
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/injections/tab-preview.ts b/src/injections/tab-preview.ts
@@ -256,6 +256,7 @@ async function main() {
     flex-shrink: 0;
     width: 100%;
     background-color: var(--hbg);
+    font-size: 16px;
     color: var(--hfg);
     overflow: hidden;
 `
@@ -266,13 +267,14 @@ async function main() {
   headerEl.appendChild(state.titleEl)
   state.titleEl.style.cssText = `
     position: relative;
-    margin: 6px 8px;
+    margin: 6px 8px 4px;
     padding: 0;
-    font-size: .875rem;
+    font-size: .875em;
     font-weight: 700;
-    /* line-height: 1.1rem;
-    max-height: 2.2rem;
+    /* line-height: 1.2em;
+    max-height: 2.4em;
     overflow: clip; */
+    line-height: 1.2em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -284,13 +286,14 @@ async function main() {
   headerEl.appendChild(state.urlEl)
   state.urlEl.style.cssText = `
     position: relative;
-    margin: 4px 8px 8px;
+    margin: 0 8px 8px;
     padding: 0;
-    font-size: .75rem;
+    font-size: .8125em;
     font-weight: 400;
-    /* line-height: 1rem;
-    max-height: 2rem;
+    /* line-height: 1.2em;
+    max-height: 2.4em;
     overflow: clip; */
+    line-height: 1.2em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

diff --git a/src/popup.tab-preview/tab-preview.html b/src/popup.tab-preview/tab-preview.html
@@ -18,6 +18,7 @@
       color-scheme: light dark;
       background-color: light-dark(#eee, #333);
       animation: appearing .2s;
+      font-size: 16px;
     }
     body {
       padding: 0;
@@ -42,7 +43,7 @@
     }
     #title {
       position: relative;
-      margin: 6px 8px;
+      margin: 6px 8px 4px;
       padding: 0;
       font-size: .875rem;
       font-weight: 700;
@@ -55,9 +56,9 @@
     }
     #url {
       position: relative;
-      margin: 4px 8px 8px;
+      margin: 0 8px 8px;
       padding: 0;
-      font-size: .75rem;
+      font-size: .8125rem;
       font-weight: 400;
       /* line-height: 1rem;
       max-height: 2rem;