Enhance layout structure and styling for improved UI

alexbaumgertner · alexbaumgertner · commit 584f8434a19d · 2025-08-10T15:21:28.000+03:00
- Updated global CSS to establish a flexbox layout for the body, ensuring a minimum height of 100vh and proper footer styling.
- Refactored RootLayout to wrap children in a main element for better semantic structure.
- Simplified IndexPage by removing unnecessary main tags, directly rendering sections for improved readability and performance.
diff --git a/src/app/(sections)/page.tsx b/src/app/(sections)/page.tsx
@@ -15,18 +15,16 @@ export default async function IndexPage() {
   return (
     <div className="IndexPage">
       <article>
-        <main>
-          <section aria-label="Синонимы">
-            <h2>Новости</h2>
-            <ul>
-              {documents.map((document) => (
-                <li key={document.id}>
-                  <Link href={`/news/${document.slug}`}>{document.title}</Link>
-                </li>
-              ))}
-            </ul>
-          </section>
-        </main>
+        <section aria-label="Синонимы">
+          <h2>Новости</h2>
+          <ul>
+            {documents.map((document) => (
+              <li key={document.id}>
+                <Link href={`/news/${document.slug}`}>{document.title}</Link>
+              </li>
+            ))}
+          </ul>
+        </section>
       </article>
     </div>
   )
diff --git a/src/app/global.css b/src/app/global.css
@@ -25,6 +25,18 @@ body {
   color: var(--text-color);
   font-family: sans-serif;
   line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex: 1;
+}
+
+footer {
+  background: #ccc;
+  padding: 1rem;
 }
 
 a {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -10,7 +10,7 @@ export default async function RootLayout({
   return (
     <html lang="ru">
       <body>
-        {children}
+        <main>{children}</main>
         <SpeedInsights />
         <Analytics />
         <Footer />
