Some improvements to visuals

enshi/src/Components/ArticleViewer/ArticleViewer.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Flex, Separator, Text } from "@radix-ui/themes";
+import { Box, Flex, ScrollArea, Separator, Text } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
 import { Interweave } from "interweave";
 import { useAtomValue } from "jotai";
@@ -35,17 +35,14 @@ export default function ArticleViewer(props: TArticleViewer) {
     if (isPending) return <SkeletonPostLoader />;
 
     return (
-        <>
-            <Container size={"3"}>
-                <div className="ql-snow ql-editor">
-                    <Container size={"2"} className="mt-0">
-                        <Flex direction={"column"}>
+            <ScrollArea className="p-0 mx-auto overflow-hidden ql-editor max-w-pc-width">
+                <Flex direction={"column"} className="overflow-hidden">
                     <Text className="mb-2" as="div" size={"9"}>
                         {data.title}
                     </Text>
                     <Flex
                         gap={"3"}
-                                className="items-center mt-4 mb-2 align-baseline"
+                        className="items-center mt-4 mb-2 overflow-hidden align-baseline"
                     >
                         <Flex gap={"1"}>
                             <VoteButton
@@ -53,9 +50,7 @@ export default function ArticleViewer(props: TArticleViewer) {
                                 postId={queryParams["postId"] || ""}
                             />
 
-                                    <VoteCounter
-                                        postId={queryParams["postId"] || ""}
-                                    />
+                            <VoteCounter postId={queryParams["postId"] || ""} />
 
                             <VoteButton
                                 vote={DOWNVOTE}
@@ -72,11 +67,10 @@ export default function ArticleViewer(props: TArticleViewer) {
                         {user ? <AddPostToBlogDialog /> : null}
                     </Flex>
                 </Flex>
-                        <Separator size={"4"} className="mb-2" />
+
+                <Separator size={"4"} className="my-2" />
+
                 <Interweave content={data.content} />
-                    </Container>
-                </div>
-            </Container>
-        </>
+            </ScrollArea>
     );
 }

enshi/src/Components/NavBar/NavBar.tsx

@@ -6,7 +6,7 @@ import SearchField from "./SearchField/SearchField";
 export default function NavBar() {
     return (
         <Flex className="justify-center w-full">
-            <nav className="flex justify-center pt-2 pb-2 ml-4 mr-4 mb-4 mt-2 flex-[1] max-h-fit max-w-[70rem]">
+            <nav className="flex justify-center pt-2 pb-2 ml-4 mr-4 mb-4 mt-2 flex-[1] max-h-fit max-w-pc-width">
                 <CustomNavigationMenu />
 
                 <SearchField />

enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx

@@ -1,8 +1,8 @@
-import { Box, Container, Flex } from "@radix-ui/themes";
+import { Box, Container, Flex, ScrollArea } from "@radix-ui/themes";
 import { useAtom, useSetAtom } from "jotai";
 import {
     postCreationAtom,
-    postCreationTitleAtom
+    postCreationTitleAtom,
 } from "../../AtomStore/AtomStore";
 import Editor from "../../Components/Editor/Editor";
 import SubmitPostButton from "./SubmitPostButton/SubmitPostButton";
@@ -13,10 +13,9 @@ export default function PostCreatorPage() {
 
     return (
         <>
-            
-            <Box className="flex flex-col flex-1">
-                <Flex gap={"4"} direction={"column"} className="flex-[1]">
-                    <Container className="flex-[1]">
+            <Box className="flex flex-col flex-1 overflow-hidden">
+                <Flex gap={"4"} direction={"column"} className="justify-start overflow-hidden">
+                    <Container>
                         <input
                             placeholder={"Post title"}
                             className="mb-2 border-0 border-b-[1px] 
@@ -29,9 +28,11 @@ export default function PostCreatorPage() {
                         />
                     </Container>
 
-                    <Container className="overflow-y-auto flex-grow-[100]">
+                    <ScrollArea>
+                        <Container>
                             <Editor onChange={setContentValue} />
                         </Container>
+                    </ScrollArea>
 
                     <Box className="flex justify-center flex-[1] mb-4">
                         <SubmitPostButton className="text-2xl rounded-full w-52" />

enshi/src/index.css

@@ -10,6 +10,10 @@
 	}
 }
 
+:root {
+	--max-content-width: 70rem;
+}
+
 .radix-themes {
 	--default-font-family: "Times New Roman"; ;
  

enshi/src/layout/ProfilePage/ProfilePage.tsx

@@ -8,7 +8,7 @@ export default function ProfilePage() {
             className={`
                 relative flex-col flex-1 gap-0 mx-4 
                 sm:flex-row sm:gap-4 
-                md:w-full md:min-w-[45rem] md:max-w-[70rem] md:mx-auto
+                md:w-full md:min-w-[45rem] md:max-w-pc-width md:mx-auto
                 overflow-hidden
             `}
         >

enshi/tailwind.config.js

@@ -7,6 +7,9 @@ export default {
                 "primary-color": "var(--primary-color)",
                 "secondary-color": "var(--secondary-color)",
             },
+            maxWidth: {
+                "pc-width": "var(--max-content-width)",
+            },
             fontFamily: {
                 'times': "Times New Roman"
             },