style: Improve table styling and color for missing status

Author: Adebesin-Cell

lunaria/components.ts

@@ -221,14 +221,16 @@ export const StatusByFile = (
 		<h2 id="by-file">
 			<a href="#by-file">Translation status by file</a>
 		</h2>
-		<table class="status-by-file">
-			<thead>
-				<tr>
-					${['File', ...locales.map(({ lang }) => lang)].map(col => html`<th>${col}</th>`)}
-				</tr>
-			</thead>
-			${TableBody(status, locales, lunaria)}
-		</table>
+		<div class="status-by-file-wrapper">
+			<table class="status-by-file">
+				<thead>
+					<tr>
+						${['File', ...locales.map(({ lang }) => lang)].map(col => html`<th>${col}</th>`)}
+					</tr>
+				</thead>
+				${TableBody(status, locales, lunaria)}
+			</table>
+		</div>
 		<sup class="capitalize">❌ missing &nbsp; 🔄 outdated &nbsp; ✔ done </sup>
 	`
 }

lunaria/styles.ts

@@ -29,7 +29,7 @@ export const BaseStyles = html`
       --ln-color-link: var(--ln-color-blue);
       --ln-color-done: var(--ln-color-purple);
       --ln-color-outdated: var(--ln-color-orange);
-      --ln-color-missing: var(--ln-color-black);
+      --ln-color-missing: #ef4444;
       --ln-color-table-border: var(--ln-color-gray-3);
       --ln-color-table-background: var(--ln-color-gray-1);
     }
@@ -112,6 +112,11 @@ export const BaseStyles = html`
     }
 
     main {
+      margin-inline: auto;
+      padding-inline: 1rem;
+    }
+
+    .limit-to-viewport {
       max-width: 60ch;
       margin-inline: auto;
     }
@@ -175,12 +180,16 @@ export const BaseStyles = html`
       font-size: 0.75rem;
     }
 
-    .status-by-file {
+    .status-by-file-wrapper {
+      overflow-x: auto;
       margin-bottom: 1rem;
+    }
+
+    .status-by-file {
+      width: 100%;
       border-collapse: collapse;
       border: 1px solid var(--ln-color-table-border);
       font-size: 0.8125rem;
-      column-gap: 64px;
     }
 
     .status-by-file tr:first-of-type td {
@@ -296,9 +305,9 @@ export const CustomStyles = html`
       --ln-color-link: #539bf5;
       --ln-color-table-background: var(--bg-subtle);
       --ln-color-table-border: var(--border);
-      --ln-color-background: var(--theme-bg-gradient);
-      --ln-color-black: var(--theme-text);
-      --ln-color-missing: var(--ln-color-black);
+      --ln-color-background: var(--bg);
+      --ln-color-black: var(--fg);
+      --ln-color-missing: #f87171;
       --ln-color-outdated: #fb923c;
       --ln-color-done: #c084fc;
     }
@@ -307,6 +316,10 @@ export const CustomStyles = html`
       background-color: var(--bg);
     }
 
+    body {
+      color: var(--fg);
+    }
+
     h1,
     h2,
     h3,