Merge branch 'main' of https://github.com/Sendouc/sendou.ink

components/common/Markdown.tsx

@@ -48,7 +48,7 @@ const Markdown: React.FC<MarkdownProps> = ({
     return {
       paragraph: (props: any) => {
         const { children } = props;
-        return <Text mb={2}>{children}</Text>;
+        return <Text as="div" mb={2}>{children}</Text>;
       },
       emphasis: (props: any) => {
         const { children } = props;

components/layout/Nav.tsx

@@ -27,6 +27,7 @@ const Nav = () => {
       position="sticky"
       alignSelf="flex-start"
       display={["none", null, null, "block"]}
+      className="scrollableNavigation"
     >
       {navItems.map(({ code, name }) => {
         const isActive = navItem?.code === code;

pages/styles.css

@@ -176,3 +176,14 @@ For React Datepicker
   color: var(--text);
   outline: none;
 }
+
+.scrollableNavigation {
+  max-height: calc(100vh - 1rem);
+  overflow-y: auto;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollableNavigation::-webkit-scrollbar {
+  display: none;
+}