💄 Fix styles

pkg/view/src/components/PostItem.tsx

@@ -43,7 +43,7 @@ export default function PostItem(props: {
   );
 
   return (
-    <div class="post-item max-w-screen">
+    <div class="post-item">
       <Show when={!props.noAuthor}>
         <a href={`/accounts/${props.post.author.name}`}>
           <div class="flex bg-base-200">

pkg/view/src/index.css

@@ -13,4 +13,13 @@ html, body {
 
 .medium-zoom-overlay {
     z-index: 10;
+}
+
+.scrollbar-hidden {
+    scrollbar-width: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+    display: none;
+    width: 0;
 }

pkg/view/src/layouts/RootLayout.tsx

@@ -54,7 +54,7 @@ export default function RootLayout(props: any) {
         <Navbar />
       </Show>
 
-      <main class={mainContentStyles()}>{props.children}</main>
+      <main class={`${mainContentStyles()} scrollbar-hidden`}>{props.children}</main>
     </Show>
   );
 }

pkg/view/src/pages/feed.module.css

@@ -1,12 +1,12 @@
 .wrapper {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: fit-content(100%);
     column-gap: 20px;
 
     max-height: calc(100vh - 64px);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
     .wrapper {
         grid-template-columns: 1fr 2fr 1fr;
     }

pkg/view/src/pages/feed.tsx

@@ -5,7 +5,7 @@ export default function DashboardPage(props: any) {
     <div class={`${styles.wrapper} container mx-auto`}>
       <div id="trending" class="card shadow-xl h-fit"></div>
 
-      <div id="content" class="card shadow-xl">
+      <div id="content max-w-screen" class="card shadow-xl">
         {props.children}
       </div>