diff --git a/src/App.module.scss b/src/App.module.scss
index 1acf3df..25a83d1 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -1,9 +1,11 @@
$navLinkAccentColor: #09c;
$navLinkColor: hsl(203, 91%, 91%);
-main.main {
- display: flex;
+.main {
+ 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;
-}
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 99fee16..0c090d2 100644
--- a/src/App.tsx
+++ b/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 (
-
+
{navLinks.map((navLink) => {
const active = (
@@ -35,8 +35,10 @@ function Layout() {
})}
-
-
+
+
+
+
);
}
@@ -58,12 +60,7 @@ export default function App() {
});
} else {
return (
-
+
);
}
})}
diff --git a/src/components/KanjiList.module.scss b/src/components/KanjiList.module.scss
index 128c800..637d698 100644
--- a/src/components/KanjiList.module.scss
+++ b/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%);
-}
+}
\ No newline at end of file
diff --git a/src/panes/KanjiPane.module.scss b/src/panes/KanjiPane.module.scss
index e69de29..cceee8c 100644
--- a/src/panes/KanjiPane.module.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/panes/KanjiPane.tsx b/src/panes/KanjiPane.tsx
index 79e9994..58cc762 100644
--- a/src/panes/KanjiPane.tsx
+++ b/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 (
- <>
-
-
- {data && }
-
+
+
+ {data && }
+
-
- {selectedKanji ? : "nothing selected"}
-
-
- >
+
+ {selectedKanji ? : "nothing selected"}
+
+
);
}
diff --git a/src/styles.css b/src/styles.css
index b8082b7..b19b318 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -11,4 +11,4 @@ body {
body {
overflow: hidden;
-}
+}
\ No newline at end of file