feat: add responsive design, update packages

src/renderer/src/components/file-selector/file-selector.module.scss

@@ -1,4 +1,6 @@
 .container {
+  position: sticky;
+  top: 0;
   > [class*='tree'] {
     margin-top: 0;
     > [class*='container'] {

src/renderer/src/components/view/view.module.scss

@@ -33,3 +33,23 @@
   overflow: auto;
   padding: 31px 24px;
 }
+
+@media (max-width: 1020px) {
+  .container {
+    grid-template-columns: 200px minmax(65ch, 100%);
+  }
+  .tocContainer {
+    display: none;
+  }
+}
+@media (max-width: 830px) {
+  .container {
+    grid-template-columns: 1fr;
+    > :first-child {
+      border-right: none;
+    }
+  }
+  .fileSelectorContainer {
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+}

src/renderer/src/components/view/view.tsx

@@ -62,7 +62,7 @@ export const View = () => {
     <div className={s.page}>
       <ImagePreview onClose={() => setSrcPreview('')} open={!!srcPreview} src={srcPreview} />
       <div className={s.container}>
-        <div>
+        <div className={s.fileSelectorContainer}>
           {directoryContents && (
             <MdxFileSelector
               data={directoryContents.data}
@@ -74,7 +74,7 @@ export const View = () => {
         <Prose as={'article'} className={s.root}>
           <MdxComponent code={code} onImageClick={setSrcPreview} />
         </Prose>
-        <div>
+        <div className={s.tocContainer}>
           <TableOfContents tocMap={toc?.map} />
         </div>
       </div>