From 31c300d468e994e3e7e730f4b829806485cf72ba Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <dash@wind.garden>
Date: Thu, 28 Nov 2024 19:02:34 +0100
Subject: [PATCH] news: make sidebar width consistent

---
 .../layouts/HomeLayout/index.module.css       |  2 +-
 .../pages/NewsPage/index.module.css           | 30 ++++++++++-
 .../src/components/pages/NewsPage/index.tsx   | 50 ++++++++++---------
 3 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/layouts/HomeLayout/index.module.css b/frontend/src/components/layouts/HomeLayout/index.module.css
index 059e3e8d..7e2bcf7b 100644
--- a/frontend/src/components/layouts/HomeLayout/index.module.css
+++ b/frontend/src/components/layouts/HomeLayout/index.module.css
@@ -2,7 +2,7 @@
   display: grid;
   gap: 1rem;
   grid-template-areas: "left main right";
-  grid-template-columns: 2fr 5fr 2fr;
+  grid-template-columns: 300px 5fr 300px;
 }
 
 @media (max-width: 1000px) {
diff --git a/frontend/src/components/pages/NewsPage/index.module.css b/frontend/src/components/pages/NewsPage/index.module.css
index c4a4b99d..66378ae7 100644
--- a/frontend/src/components/pages/NewsPage/index.module.css
+++ b/frontend/src/components/pages/NewsPage/index.module.css
@@ -1,4 +1,4 @@
-.content {
+.mainText {
   margin-top: 1rem;
 }
 
@@ -8,3 +8,31 @@
   justify-content: space-between;
   margin-top: 1rem;
 }
+
+.wrapper {
+  display: grid;
+  gap: 1rem;
+  grid-template-areas: "content sidebar";
+  grid-template-columns: auto 300px;
+}
+
+@media (max-width: 1000px) {
+  .wrapper {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content auto;
+  }
+}
+
+@media (max-width: 600px) {
+  .wrapper {
+    grid-template-columns: 1fr;
+    grid-template-areas: "sidebar" "content";
+  }
+}
+
+.content {
+  grid-area: content;
+}
+.sidebar {
+  grid-area: sidebar;
+}
diff --git a/frontend/src/components/pages/NewsPage/index.tsx b/frontend/src/components/pages/NewsPage/index.tsx
index a8d7b405..f0d4433e 100644
--- a/frontend/src/components/pages/NewsPage/index.tsx
+++ b/frontend/src/components/pages/NewsPage/index.tsx
@@ -7,8 +7,6 @@ import { Loader } from "src/components/common/Loader";
 import { NewsSidebar } from "src/components/common/NewsSidebar";
 import { PermissionGuard } from "src/components/common/PermissionGuard";
 import { SectionHeader } from "src/components/common/Section";
-import { SidebarLayout } from "src/components/layouts/SidebarLayout";
-import { SidebarLayoutVariant } from "src/components/layouts/SidebarLayout";
 import { Markdown } from "src/components/markdown/Markdown";
 import { usePageMetadata } from "src/contexts/PageMetadataContext";
 import type { NewsDetails } from "src/services/NewsService";
@@ -47,30 +45,34 @@ const NewsPage = () => {
 
   const news: NewsDetails = newsResult.data;
 
-  return (
-    <SidebarLayout
-      variant={SidebarLayoutVariant.Reverse}
-      sidebar={<NewsSidebar />}
-    >
-      <Box>
-        {news.subject && (
-          <SectionHeader>
-            <Markdown>{news.subject}</Markdown>
-          </SectionHeader>
-        )}
+  const content = (
+    <Box>
+      {news.subject && (
+        <SectionHeader>
+          <Markdown>{news.subject}</Markdown>
+        </SectionHeader>
+      )}
+
+      <div className={`${styles.mainText} ChildMarginClear`}>
+        <Markdown>{news.text || "No news text is available."}</Markdown>
+      </div>
 
-        <div className={`${styles.content} ChildMarginClear`}>
-          <Markdown>{news.text || "No news text is available."}</Markdown>
-        </div>
+      <footer className={styles.footer}>
+        <em>Posted on {formatDate(news.created)}</em>
+        <PermissionGuard require={UserPermission.editNews}>
+          <Button to={`/news/${newsId}/edit`}>Edit news</Button>
+        </PermissionGuard>
+      </footer>
+    </Box>
+  );
 
-        <footer className={styles.footer}>
-          <em>Posted on {formatDate(news.created)}</em>
-          <PermissionGuard require={UserPermission.editNews}>
-            <Button to={`/news/${newsId}/edit`}>Edit news</Button>
-          </PermissionGuard>
-        </footer>
-      </Box>
-    </SidebarLayout>
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.sidebar}>
+        <NewsSidebar />
+      </div>
+      <div className={styles.content}>{content}</div>
+    </div>
   );
 };