sigh

src/App.module.scss

@@ -1,9 +1,11 @@
 $navLinkAccentColor: #09c;
 $navLinkColor: hsl(203, 91%, 91%);
 
-main.main {
+.main {
-  display: flex;
+  min-height: 0;
+  display: inline-flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .header {
@@ -19,6 +21,13 @@ main.main {
   }
 }
 
+.body {
+  min-height: 0;
+  flex-basis: 0px;
+  flex-grow: 1;
+  display: inline-flex;
+}
+
 .link {
   display: inline-block;
   width: 100%;
@@ -41,4 +50,4 @@ main.main {
 .link-active {
   border-top-color: $navLinkAccentColor;
   background-color: $navLinkColor;
-}
+}

src/App.tsx

@@ -1,7 +1,7 @@
 import { Link, RouterProvider, createHashRouter } from "react-router-dom";
 import KanjiPane from "./panes/KanjiPane";
 import classNames from "classnames";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, Flex } from "@chakra-ui/react";
 import { createBrowserRouter } from "react-router-dom";
 import { Outlet, Route, createRoutesFromElements, matchPath, useLocation } from "react-router";
 import SrsPane from "./panes/SrsPane";
@@ -16,7 +16,7 @@ function Layout() {
   const location = useLocation();
 
   return (
-    <main className={styles.main}>
+    <Flex className={styles.main} direction="column" alignSelf="start">
       <ul className={styles.header}>
         {navLinks.map((navLink) => {
           const active = (
@@ -35,8 +35,10 @@ function Layout() {
         })}
       </ul>
 
-      <Outlet />
+      <div className={styles.body}>
-    </main>
+        <Outlet />
+      </div>
+    </Flex>
   );
 }
 
@@ -58,12 +60,7 @@ export default function App() {
             });
           } else {
             return (
-              <Route
+              <Route key={`route-${route.key}`} index={idx == 0} path={route.path} element={route.element} />
-                key={`route-${route.key}`}
-                index={idx == 0}
-                path={route.path}
-                element={route.element}
-              />
             );
           }
         })}

src/components/KanjiList.module.scss

@@ -1,7 +1,9 @@
 .kanji-list {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   gap: 2px;
+
+  min-height: 0;
 }
 
 .kanji-link {
@@ -26,4 +28,4 @@
 .kanji-link-active {
   border-left-color: #09c;
   background-color: hsl(203, 91%, 91%);
-}
+}

src/panes/KanjiPane.module.scss

@@ -0,0 +1,16 @@
+.kanji-pane-container {
+  display: flex;
+  width: 100%;
+}
+
+.kanji-list {
+  // display: flex;
+  // flex-direction: column;
+
+  min-height: 0;
+  width: 240px;
+}
+
+.right-side {
+  flex-grow: 5;
+}

src/panes/KanjiPane.tsx

@@ -1,6 +1,6 @@
 import { invoke } from "@tauri-apps/api/tauri";
 import useSWR from "swr";
-import { Box, Grid, GridItem, LinkBox, Stack } from "@chakra-ui/layout";
+import { Box, Flex, Grid, GridItem, LinkBox, Stack } from "@chakra-ui/layout";
 
 import styles from "./KanjiPane.module.scss";
 import { Link, useParams } from "react-router-dom";
@@ -23,16 +23,14 @@ export default function KanjiPane() {
   }
 
   return (
-    <>
+    <Flex gap={3} className={styles['kanji-pane-container']}>
-      <Grid templateRows="1fr" templateColumns="3fr 5fr">
+      <Box className={styles["kanji-list"]}>
-        <GridItem className={styles["kanji-list"]}>
+        {data && <KanjiList data={data} selectedCharacter={selectedKanji} />}
-          {data && <KanjiList data={data} selectedCharacter={selectedKanji} />}
+      </Box>
-        </GridItem>
 
-        <GridItem>
+      <Box className={styles['right-side']}>
-          {selectedKanji ? <KanjiDisplay kanjiCharacter={selectedKanji} /> : "nothing selected"}
+        {selectedKanji ? <KanjiDisplay kanjiCharacter={selectedKanji} /> : "nothing selected"}
-        </GridItem>
+      </Box>
-      </Grid>
+    </Flex>
-    </>
   );
 }

src/styles.css

@@ -11,4 +11,4 @@ body {
 
 body {
   overflow: hidden;
-}
+}