feat: add responsive design, update packages

package-lock.json

@@ -12,8 +12,8 @@
         "@electron-toolkit/preload": "^2.0.0",
         "@electron-toolkit/utils": "^2.0.0",
         "@fontsource/roboto": "^5.0.8",
-        "@it-incubator/md-bundler": "0.0.8",
+        "@it-incubator/md-bundler": "0.0.9",
-        "@it-incubator/mdx-components": "0.0.4",
+        "@it-incubator/mdx-components": "0.0.5",
         "@it-incubator/ui-kit": "0.2.18",
         "builtin-modules": "^3.3.0",
         "chokidar": "^3.5.3",
@@ -1744,9 +1744,9 @@
       }
     },
     "node_modules/@it-incubator/md-bundler": {
-      "version": "0.0.8",
+      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@it-incubator/md-bundler/-/md-bundler-0.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/@it-incubator/md-bundler/-/md-bundler-0.0.9.tgz",
-      "integrity": "sha512-c0nGqmfzdTuClnmp2Sp9IjNvNw7+nnIMcuv3U4pKWop6E01B1wRJ8UpYIpyVpbVQhpu3HCqVn9y38hP3GGtjZg==",
+      "integrity": "sha512-wG5WdbJroLRBjtQ9otT5qFgewqirO+h2tOs6wi2VHVnX3/m9acGGwsB3OJhIKxEfGTBiBAhC1Hu6FpvDpXBLBA==",
       "dependencies": {
         "@mdx-js/mdx": "^2.3.0",
         "esbuild": "^0.19.2",
@@ -1770,9 +1770,9 @@
       }
     },
     "node_modules/@it-incubator/mdx-components": {
-      "version": "0.0.4",
+      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/@it-incubator/mdx-components/-/mdx-components-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/@it-incubator/mdx-components/-/mdx-components-0.0.5.tgz",
-      "integrity": "sha512-GEqGlg/5u9Tu1xahabRMEKv2g/FxMEhWhMmdIYclJDCqTJfguUkmIWeYjKgJVgJFqxeuJQNpzd6D850RuviEJQ==",
+      "integrity": "sha512-UGqkxo+m/Z49dZem/hPb+OyCLdV6p/f0nw9eTR0W6FWJ09SyuKlkEGH2iiBJ8fwtllJ5+K6/yQW+zjwWxh31DQ==",
       "dependencies": {
         "@radix-ui/react-scroll-area": "1.0.4",
         "@radix-ui/react-tabs": "1.0.4",

package.json

@@ -23,8 +23,8 @@
     "@electron-toolkit/preload": "^2.0.0",
     "@electron-toolkit/utils": "^2.0.0",
     "@fontsource/roboto": "^5.0.8",
-    "@it-incubator/md-bundler": "0.0.8",
+    "@it-incubator/md-bundler": "0.0.9",
-    "@it-incubator/mdx-components": "0.0.4",
+    "@it-incubator/mdx-components": "0.0.5",
     "@it-incubator/ui-kit": "0.2.18",
     "builtin-modules": "^3.3.0",
     "chokidar": "^3.5.3",

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>