From bf2bf78bb5bb3ee1ccf71b4b32b08242b30a08f0 Mon Sep 17 00:00:00 2001
From: SirBlobby <adithcool.5@gmail.com>
Date: Sat, 31 Oct 2026 21:17:42 -0400
Subject: [PATCH] Improve mobile layout

---
 src/lib/components/blog/PostContent.svelte    | 16 ++++++++++++++++
 src/lib/components/shell/Battery.svelte       |  4 ++++
 src/lib/components/shell/DiscordStatus.svelte |  8 ++++++++
 src/lib/components/ui/Section.svelte          |  6 ++++--
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/blog/PostContent.svelte b/src/lib/components/blog/PostContent.svelte
index 8979e6d..b0e8f44 100644
--- a/src/lib/components/blog/PostContent.svelte
+++ b/src/lib/components/blog/PostContent.svelte
@@ -32,6 +32,21 @@
 <style>
 	.post-content {
 		line-height: 1.75;
+		overflow-wrap: break-word;
+	}
+
+	.post-content :global(table) {
+		display: block;
+		max-width: 100%;
+		overflow-x: auto;
+		border-collapse: collapse;
+	}
+
+	.post-content :global(th),
+	.post-content :global(td) {
+		padding: 0.35rem 0.75rem;
+		border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
+		text-align: left;
 	}
 
 	.post-content :global(h1),
@@ -127,6 +142,7 @@
 
 	.post-content :global(img) {
 		max-width: 100%;
+		height: auto;
 	}
 
 	.post-content :global(hr) {
diff --git a/src/lib/components/shell/Battery.svelte b/src/lib/components/shell/Battery.svelte
index ff581a6..20dc57b 100644
--- a/src/lib/components/shell/Battery.svelte
+++ b/src/lib/components/shell/Battery.svelte
@@ -68,5 +68,9 @@
 		.level {
 			display: none;
 		}
+
+		.battery {
+			padding: 0 0.3rem;
+		}
 	}
 </style>
diff --git a/src/lib/components/shell/DiscordStatus.svelte b/src/lib/components/shell/DiscordStatus.svelte
index a68281f..28d6fbc 100644
--- a/src/lib/components/shell/DiscordStatus.svelte
+++ b/src/lib/components/shell/DiscordStatus.svelte
@@ -93,5 +93,13 @@
 		.status-name {
 			display: none;
 		}
+
+		.discord-status {
+			margin-right: 2px;
+		}
+
+		.status-button {
+			padding: 0 0.45rem;
+		}
 	}
 </style>
diff --git a/src/lib/components/ui/Section.svelte b/src/lib/components/ui/Section.svelte
index 920028b..a00308a 100644
--- a/src/lib/components/ui/Section.svelte
+++ b/src/lib/components/ui/Section.svelte
@@ -29,15 +29,17 @@
 	.section-title::before,
 	.section-title::after {
 		content: '';
-		height: 1px;
-		background: color-mix(in srgb, var(--foreground) 25%, transparent);
+		height: 0;
+		border-top: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
 	}
 
 	.section-title::before {
+		flex-shrink: 0;
 		width: 1.5rem;
 	}
 
 	.section-title::after {
 		flex: 1;
+		min-width: 1rem;
 	}
 </style>