From a25bd8ad6dd9b38856975bb0b7de52309d6b57ad Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sat, 28 Feb 2026 05:50:46 +0100
Subject: [PATCH 1/4] style: Improve table styling and color for missing status

---
 lunaria/components.ts | 18 ++++++++++--------
 lunaria/styles.ts     | 25 +++++++++++++++++++------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/lunaria/components.ts b/lunaria/components.ts
index f5d65d9672..f911e4cd2b 100644
--- a/lunaria/components.ts
+++ b/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>
 	`
 }
diff --git a/lunaria/styles.ts b/lunaria/styles.ts
index d712b9c0a5..126e1e0b22 100644
--- a/lunaria/styles.ts
+++ b/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,

From 5294864b5e45c23df9716bff87780b0e8a07c58f Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sat, 28 Feb 2026 06:07:43 +0100
Subject: [PATCH 2/4] style: Remove unnecessary code for margin and width

---
 lunaria/styles.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/lunaria/styles.ts b/lunaria/styles.ts
index 126e1e0b22..59b7891553 100644
--- a/lunaria/styles.ts
+++ b/lunaria/styles.ts
@@ -112,11 +112,6 @@ export const BaseStyles = html`
     }
 
     main {
-      margin-inline: auto;
-      padding-inline: 1rem;
-    }
-
-    .limit-to-viewport {
       max-width: 60ch;
       margin-inline: auto;
     }
@@ -186,7 +181,6 @@ export const BaseStyles = html`
     }
 
     .status-by-file {
-      width: 100%;
       border-collapse: collapse;
       border: 1px solid var(--ln-color-table-border);
       font-size: 0.8125rem;

From bb5c52bb0f0724ec3683f5aff8324965ebdabe6c Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sat, 28 Feb 2026 06:13:03 +0100
Subject: [PATCH 3/4] style: Update styles for status-by-file-wrapper

---
 lunaria/styles.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lunaria/styles.ts b/lunaria/styles.ts
index 59b7891553..a9a65ca15c 100644
--- a/lunaria/styles.ts
+++ b/lunaria/styles.ts
@@ -176,13 +176,15 @@ export const BaseStyles = html`
     }
 
     .status-by-file-wrapper {
-      overflow-x: auto;
+      overflow-x: scroll;
       margin-bottom: 1rem;
+      border: 1px solid var(--ln-color-table-border);
+      border-radius: 0.375rem;
+      scrollbar-color: var(--ln-color-gray-6) var(--ln-color-gray-2);
     }
 
     .status-by-file {
       border-collapse: collapse;
-      border: 1px solid var(--ln-color-table-border);
       font-size: 0.8125rem;
     }
 

From 26d05ebb2333a910e45fc9e8a72282e7a40077b3 Mon Sep 17 00:00:00 2001
From: Adebesin Tolulope <adebesintolulope80@gmail.com>
Date: Sat, 28 Feb 2026 06:17:23 +0100
Subject: [PATCH 4/4] style: update overflow property to auto in
 status-by-file-wrapper

---
 lunaria/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lunaria/styles.ts b/lunaria/styles.ts
index a9a65ca15c..9e7d0db23e 100644
--- a/lunaria/styles.ts
+++ b/lunaria/styles.ts
@@ -176,7 +176,7 @@ export const BaseStyles = html`
     }
 
     .status-by-file-wrapper {
-      overflow-x: scroll;
+      overflow-x: auto;
       margin-bottom: 1rem;
       border: 1px solid var(--ln-color-table-border);
       border-radius: 0.375rem;