fix(ui): improve page layout

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 />} />

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>

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 && (
         <>

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" />}

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>

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">

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>

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>

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

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 && (
         <>

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}

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}

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>
   );
 }

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*/