From 176ec901de4036cd03e83e5d1a9eb88856b76a8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Arod?= <sebastien.arod@gmail.com>
Date: Tue, 5 May 2026 21:48:16 +0200
Subject: [PATCH] fix(ui): improve page layout

* fix PageHeader separator width which was breaking layout
* side menu now uses a fixed size
* <main> use fully the remaining width
* <main> now has a min height of the screen height minus margins
* <main> padding is now defined globally

Fixes: #291
---
 browser-extension/src/entrypoints/posts/App.tsx          | 4 ++--
 .../entrypoints/posts/ContactSupport/ContactSupport.tsx  | 2 +-
 .../posts/Developer/PostSnapshotDetailPage.tsx           | 2 +-
 .../entrypoints/posts/Developer/PostSnapshotListPage.tsx | 2 +-
 .../src/entrypoints/posts/Help/HarrasementHelpPage.tsx   | 2 +-
 .../src/entrypoints/posts/Help/HelpPage.tsx              | 2 +-
 .../src/entrypoints/posts/Help/PrivacyPolicyPage.tsx     | 2 +-
 .../src/entrypoints/posts/Help/ProductHelpPage.tsx       | 2 +-
 .../src/entrypoints/posts/Home/HomePage.tsx              | 2 +-
 .../src/entrypoints/posts/Posts/PostDetailPage.tsx       | 2 +-
 .../src/entrypoints/posts/Posts/PostListPage.tsx         | 2 +-
 .../src/entrypoints/posts/Report/BuildReport.tsx         | 2 +-
 .../src/entrypoints/posts/Shared/PageHeader.tsx          | 9 +++++++--
 browser-extension/src/styles/global.css                  | 2 +-
 14 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/browser-extension/src/entrypoints/posts/App.tsx b/browser-extension/src/entrypoints/posts/App.tsx
index 3cfe5a2a..6e6e18e9 100644
--- a/browser-extension/src/entrypoints/posts/App.tsx
+++ b/browser-extension/src/entrypoints/posts/App.tsx
@@ -17,10 +17,10 @@ export default function App() {
   return (
     <HashRouter>
       <div className="flex h-screen bg-gray-100 dark:bg-gray-800">
-        <div className="w-1/5 overflow-y-auto">
+        <div className="w-[210px] flex-none overflow-y-auto">
           <SidePanelMenu />
         </div>
-        <div className="flex-1 w-fit overflow-y-auto ">
+        <div className="flex-grow flex-shrink flex overflow-y-auto">
           <Routes>
             <Route index path="/" element={<HomePage />} />
             <Route index path="/posts" element={<PostListPage />} />
diff --git a/browser-extension/src/entrypoints/posts/ContactSupport/ContactSupport.tsx b/browser-extension/src/entrypoints/posts/ContactSupport/ContactSupport.tsx
index bfb3d4ee..bbfeabb2 100644
--- a/browser-extension/src/entrypoints/posts/ContactSupport/ContactSupport.tsx
+++ b/browser-extension/src/entrypoints/posts/ContactSupport/ContactSupport.tsx
@@ -35,7 +35,7 @@ function ContactSupport() {
   });
 
   return (
-    <main className="p-4 flex flex-col gap-6  items-start">
+    <main className="flex flex-col gap-6  items-start">
       <PageHeader title="Signaler un problème" />
       <Card>
         <CardTitle>Comment signaler mon problème</CardTitle>
diff --git a/browser-extension/src/entrypoints/posts/Developer/PostSnapshotDetailPage.tsx b/browser-extension/src/entrypoints/posts/Developer/PostSnapshotDetailPage.tsx
index 63e6dc1d..182fc531 100644
--- a/browser-extension/src/entrypoints/posts/Developer/PostSnapshotDetailPage.tsx
+++ b/browser-extension/src/entrypoints/posts/Developer/PostSnapshotDetailPage.tsx
@@ -41,7 +41,7 @@ function PostSnapshotDetailPage() {
   });
 
   return (
-    <main className="p-4">
+    <main>
       {isLoading && <div>Loading...</div>}
       {post && (
         <>
diff --git a/browser-extension/src/entrypoints/posts/Developer/PostSnapshotListPage.tsx b/browser-extension/src/entrypoints/posts/Developer/PostSnapshotListPage.tsx
index 8bf7cf2c..ac488265 100644
--- a/browser-extension/src/entrypoints/posts/Developer/PostSnapshotListPage.tsx
+++ b/browser-extension/src/entrypoints/posts/Developer/PostSnapshotListPage.tsx
@@ -88,7 +88,7 @@ function PostSnapshotListPage() {
   };
 
   return (
-    <main className="p-4 flex flex-col gap-4 w-full max-w-full overflow-x-hidden">
+    <main className="flex flex-col gap-4 overflow-x-hidden">
       <h1>Publications collectées</h1>
 
       {postsQuery.isLoading && <Spinner className="size-8" />}
diff --git a/browser-extension/src/entrypoints/posts/Help/HarrasementHelpPage.tsx b/browser-extension/src/entrypoints/posts/Help/HarrasementHelpPage.tsx
index df9876f6..6f06cec0 100644
--- a/browser-extension/src/entrypoints/posts/Help/HarrasementHelpPage.tsx
+++ b/browser-extension/src/entrypoints/posts/Help/HarrasementHelpPage.tsx
@@ -4,7 +4,7 @@ import { HelpPageContent } from "./HelpContent";
 
 function HarrasementHelpPage() {
   return (
-    <main className="p-4 flex flex-col items-start w-full max-w-4xl">
+    <main className="flex flex-col items-start ">
       <PageHeader title="Aide et ressources - Cyberharcèlement & actions" />
       <HelpPageContent mdContent={harassmentHelpMarkdown}></HelpPageContent>
     </main>
diff --git a/browser-extension/src/entrypoints/posts/Help/HelpPage.tsx b/browser-extension/src/entrypoints/posts/Help/HelpPage.tsx
index 8a6b855f..1791f562 100644
--- a/browser-extension/src/entrypoints/posts/Help/HelpPage.tsx
+++ b/browser-extension/src/entrypoints/posts/Help/HelpPage.tsx
@@ -6,7 +6,7 @@ import { BookOpenTextIcon, HandHeartIcon, ShieldCheckIcon } from "lucide-react";
 
 function HelpPage() {
   return (
-    <main className="p-4 flex flex-col gap-6 items-start w-full max-w-4xl">
+    <main className="flex flex-col gap-6 items-start">
       <PageHeader title="Aide et ressources" />
 
       <div className="grid gap-4 md:grid-cols-3 w-full">
diff --git a/browser-extension/src/entrypoints/posts/Help/PrivacyPolicyPage.tsx b/browser-extension/src/entrypoints/posts/Help/PrivacyPolicyPage.tsx
index f527090a..c3b1c7f1 100644
--- a/browser-extension/src/entrypoints/posts/Help/PrivacyPolicyPage.tsx
+++ b/browser-extension/src/entrypoints/posts/Help/PrivacyPolicyPage.tsx
@@ -4,7 +4,7 @@ import { HelpPageContent } from "./HelpContent";
 
 function PrivacyPolicyPage() {
   return (
-    <main className="p-4 flex flex-col items-start w-full max-w-4xl">
+    <main className="flex flex-col items-start ">
       <PageHeader title="Aide et ressources - Données personnelles et politique de confidentialité" />
       <HelpPageContent mdContent={privacyPolicyMarkdown}></HelpPageContent>
     </main>
diff --git a/browser-extension/src/entrypoints/posts/Help/ProductHelpPage.tsx b/browser-extension/src/entrypoints/posts/Help/ProductHelpPage.tsx
index 7ef9455a..a59e5e9e 100644
--- a/browser-extension/src/entrypoints/posts/Help/ProductHelpPage.tsx
+++ b/browser-extension/src/entrypoints/posts/Help/ProductHelpPage.tsx
@@ -5,7 +5,7 @@ import { HelpPageContent } from "./HelpContent";
 
 function ProductHelpPage() {
   return (
-    <main className="p-4 flex flex-col  items-start w-full max-w-4xl">
+    <main className="flex flex-col items-start">
       <PageHeader title="Aide et ressources - Utiliser Balance tes Haters" />
       <HelpPageContent mdContent={productHelpMarkdown}></HelpPageContent>
     </main>
diff --git a/browser-extension/src/entrypoints/posts/Home/HomePage.tsx b/browser-extension/src/entrypoints/posts/Home/HomePage.tsx
index 47edbb03..341a56c9 100644
--- a/browser-extension/src/entrypoints/posts/Home/HomePage.tsx
+++ b/browser-extension/src/entrypoints/posts/Home/HomePage.tsx
@@ -40,7 +40,7 @@ function HomePage() {
   const allComments = (data || []).flatMap((p) => p.comments);
 
   return (
-    <main className="p-4 flex flex-col gap-6 w-full ">
+    <main className="flex flex-col gap-6">
       <PageHeader title="Vue d'ensemble" />
       <div className="flex justify-between ">
         <SocialNetworkSelector
diff --git a/browser-extension/src/entrypoints/posts/Posts/PostDetailPage.tsx b/browser-extension/src/entrypoints/posts/Posts/PostDetailPage.tsx
index baae6d92..c6371d79 100644
--- a/browser-extension/src/entrypoints/posts/Posts/PostDetailPage.tsx
+++ b/browser-extension/src/entrypoints/posts/Posts/PostDetailPage.tsx
@@ -41,7 +41,7 @@ function PostDetailPage() {
   const numberOfHatefulComments = hatefulComments.length;
 
   return (
-    <main className="p-4 flex flex-col gap-6 w-5/6">
+    <main className="flex flex-col gap-6">
       {isLoading && <div>Chargement...</div>}
       {post && (
         <>
diff --git a/browser-extension/src/entrypoints/posts/Posts/PostListPage.tsx b/browser-extension/src/entrypoints/posts/Posts/PostListPage.tsx
index 3ad43ccb..f80e6e81 100644
--- a/browser-extension/src/entrypoints/posts/Posts/PostListPage.tsx
+++ b/browser-extension/src/entrypoints/posts/Posts/PostListPage.tsx
@@ -32,7 +32,7 @@ function PostListPage() {
   } = useFilteredPostList(socialNetworkFilter);
 
   return (
-    <main className="p-4 flex flex-col gap-6  items-start">
+    <main className="flex flex-col gap-6  items-start">
       <PageHeader title="Publications analysées" />
       <SocialNetworkSelector
         value={socialNetworkFilter}
diff --git a/browser-extension/src/entrypoints/posts/Report/BuildReport.tsx b/browser-extension/src/entrypoints/posts/Report/BuildReport.tsx
index 40aab75a..6f4e237b 100644
--- a/browser-extension/src/entrypoints/posts/Report/BuildReport.tsx
+++ b/browser-extension/src/entrypoints/posts/Report/BuildReport.tsx
@@ -50,7 +50,7 @@ export function BuildReport() {
   const [displayReport, setDisplayReport] = React.useState<boolean>(false);
 
   return (
-    <main className="p-4 flex flex-col gap-6 w-full mx-auto">
+    <main className="flex flex-col gap-6">
       {!displayReport && (
         <BthStepper
           reportQueryData={reportQueryData}
diff --git a/browser-extension/src/entrypoints/posts/Shared/PageHeader.tsx b/browser-extension/src/entrypoints/posts/Shared/PageHeader.tsx
index 2bdcfa83..1566c327 100644
--- a/browser-extension/src/entrypoints/posts/Shared/PageHeader.tsx
+++ b/browser-extension/src/entrypoints/posts/Shared/PageHeader.tsx
@@ -2,9 +2,14 @@ import { Separator } from "@base-ui/react";
 
 function PageHeader({ title }: Readonly<{ title: string }>) {
   return (
-    <div>
+    <div className="w-full relative">
       <h4 className="text-left w-full mb-3">{title}</h4>
-      <Separator className="w-screen -ms-8 border" />
+
+      {/* 
+      PageHeader is meant to be used only inside a <main> tag
+      The separator is configured to overflow on <main> padding
+      */}
+      <Separator className="absolute w-[calc(100%+var(--spacing)*8)] -mx-4 border" />
     </div>
   );
 }
diff --git a/browser-extension/src/styles/global.css b/browser-extension/src/styles/global.css
index 19c9166f..b2cae625 100644
--- a/browser-extension/src/styles/global.css
+++ b/browser-extension/src/styles/global.css
@@ -39,7 +39,7 @@ blockquote {
 }
 
 main {
-  @apply bg-background m-3 rounded-md overflow-hidden w-11/12;
+  @apply bg-background m-3 p-4 rounded-md w-full min-h-[calc(100%-var(--spacing)*6)] h-fit;
 }
 
 /* Shadcn theme*/