Front page forum entry nowrap, layout fixes

src/components/layout.js

@@ -19,6 +19,82 @@ const renderSnow = () => {
   return date.getMonth() === 11 && date.getDate() > 5
 }
 
+function TopBar({
+  setSidebarOpen,
+  sidebarOpen,
+  closeSideBar,
+  href,
+  unreads,
+  userId,
+}) {
+  return (
+    <>
+      <MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
+      <Link href="/">
+        <a>
+          <img
+            src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+            alt="FryLabs"
+          />
+        </a>
+      </Link>
+      <div className={styles.topBarLinks}>
+        {Object.keys(topBarLinks).map((key) => {
+          const item = topBarLinks[key]
+
+          return (
+            <Link key={key} href={item.href}>
+              <a
+                onClick={closeSideBar}
+                className={href.includes(key) ? styles.active : undefined}
+              >
+                {item.text}
+              </a>
+            </Link>
+          )
+        })}
+      </div>
+      <div className={'seperator'} />
+      <UserStatus onClick={closeSideBar} unreads={unreads} userId={userId} />
+    </>
+  )
+}
+
+function SideBar({ sidebarOpen, closeSideBar, href, setDonateShowing }) {
+  return sidebarOpen ? (
+    <>
+      <div id="sideBarLinks" className={styles.sidebarLinks}>
+        {Object.keys(tabs).map((key) => {
+          const item = tabs[key]
+          if (item.seperator) {
+            return <hr key={key} />
+          }
+
+          return (
+            <Link href={item.href} key={key}>
+              <a
+                onClick={closeSideBar}
+                className={href.includes(key) ? styles.active : undefined}
+                id={item.id || undefined}
+              >
+                {item.text}
+              </a>
+            </Link>
+          )
+        })}
+        <a
+          onClick={() => {
+            closeSideBar()
+            setDonateShowing(true)
+          }}
+        >
+          Donate
+        </a>
+      </div>
+    </>
+  ) : null
+}
+
 function Donate() {
   return (
     <div>
@@ -165,67 +241,22 @@ export default function Layout({ children, router, globalData }) {
         </div>
       )}
       <div className={styles.topBar}>
-        <MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
+        <TopBar
-        <Link href="/">
+          setSidebarOpen={setSidebarOpen}
-          <a>
+          sidebarOpen={sidebarOpen}
-            <img
+          closeSideBar={closeSideBar}
-              src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
+          href={href}
-              alt="FryLabs"
+          unreads={unreads}
+          userId={userId}
         />
-          </a>
-        </Link>
-        <div className={styles.topBarLinks}>
-          {Object.keys(topBarLinks).map((key) => {
-            const item = topBarLinks[key]
-
-            return (
-              <Link key={key} href={item.href}>
-                <a
-                  onClick={closeSideBar}
-                  className={href.includes(key) ? styles.active : undefined}
-                >
-                  {item.text}
-                </a>
-              </Link>
-            )
-          })}
-        </div>
-        <div className={'seperator'} />
-        <UserStatus onClick={closeSideBar} unreads={unreads} userId={userId} />
       </div>
       <div className={styles.sidebar}>
-        {sidebarOpen ? (
+        <SideBar
-          <>
+          sidebarOpen={sidebarOpen}
-            <div id="sideBarLinks" className={styles.sidebarLinks}>
+          closeSideBar={closeSideBar}
-              {Object.keys(tabs).map((key) => {
+          href={href}
-                const item = tabs[key]
+          setDonateShowing={setDonateShowing}
-                if (item.seperator) {
+        />
-                  return <hr key={key} />
-                }
-
-                return (
-                  <Link href={item.href} key={key}>
-                    <a
-                      onClick={closeSideBar}
-                      className={href.includes(key) ? styles.active : undefined}
-                      id={item.id || undefined}
-                    >
-                      {item.text}
-                    </a>
-                  </Link>
-                )
-              })}
-              <a
-                onClick={() => {
-                  closeSideBar()
-                  setDonateShowing(true)
-                }}
-              >
-                Donate
-              </a>
-            </div>
-          </>
-        ) : null}
       </div>
       {donateShowing ? (
         <Modal

src/components/newsEntry.module.css

@@ -69,6 +69,10 @@
   margin-bottom: 12px;
 }
 
+.userinfo a {
+  white-space: nowrap;
+}
+
 .newsRoot {
   background-color: var(--dark-color);
   margin-left: 8px;

src/defaultStyles.css

@@ -26,8 +26,10 @@ body {
 }
 
 #__next {
+  display: flex;
   min-height: calc(100vh);
   width: 1200px;
+  max-width: 1200px;
   /* offset-x | offset-y | blur-radius | spread-radius | color */
   background-color: var(--background-color);
   box-shadow: 0px 0px 29px 19px #222426;