Style fixes

* Fix missing navigation shadow
* Switch to grid organization at top level
* Force calc() sizes to guarantee elements occupy right size

src/components/ExpressionCard/ExpressionCard.tsx

@@ -15,10 +15,14 @@ export function ExpressionCard({
 }: ExpressionCardProps) {
   return (
     <article className="content-card">
-      <h2 className="content-row text-title">{prompt}</h2>
-      <span className="content-row text-meta">{categories.join(", ")}</span>
+      <h2 className="content-row text-title margin-small">{prompt}</h2>
+      <span className="content-row text-meta margin-small">
+        {categories.join(", ")}
+      </span>
       {show_description ? (
-        <div className="content-paragraph text-details">{description}</div>
+        <div className="content-row text-details margin-paragraph">
+          {description}
+        </div>
       ) : null}
     </article>
   );

src/components/ExpressionSetCard/ExpressionSetCard.tsx

@@ -11,9 +11,11 @@ export function ExpressionSetCard({
 }: ExpressionSetCardProps) {
   return (
     <article className="content-card">
-      <h2 className="content-row text-title">{name}</h2>
-      <span className="content-row text-meta">{word_count} word(s)</span>
-      <p className="content-paragraph text-details">{description}</p>
+      <h2 className="content-row text-title margin-small">{name}</h2>
+      <span className="content-row text-meta margin-small">
+        {word_count} word(s)
+      </span>
+      <p className="content-row text-details margin-paragraph">{description}</p>
     </article>
   );
 }

src/components/ExpressionSetInfo/ExpressionSetInfo.tsx

@@ -15,8 +15,8 @@ export function ExpressionSetInfo({
   word_count,
 }: ExpressionSetInfo) {
   return (
-    <section className="expression-set-info">
-      <h2 className="content-row">
+    <section>
+      <h2 className="content-row margin-small">
         <span className="text-title grow">{name}</span>
         <Link
           href={{
@@ -27,7 +27,7 @@ export function ExpressionSetInfo({
           }}
           passHref
         >
-          <a className="icon-button justify-end">
+          <a className="icon-button">
             <Image
               src="/icons/settings.svg"
               width="24"
@@ -37,8 +37,10 @@ export function ExpressionSetInfo({
           </a>
         </Link>
       </h2>
-      <span className="content-row text-meta">{word_count} word(s)</span>
-      <p className="content-paragraph text-details">{description}</p>
+      <span className="content-row text-meta margin-small">
+        {word_count} word(s)
+      </span>
+      <p className="content-row text-details margin-paragraph">{description}</p>
     </section>
   );
 }

src/pages/expression-sets/details.tsx

@@ -17,18 +17,20 @@ const ExpressionSetDetailsPage: NextPage = () => {
   if (!expression_set)
     return (
       <Page>
-        <p className="details">Expression set not found</p>
+        <div className="page-with-padding scroll">
+          <p className="text-details">Expression set not found</p>
+        </div>
       </Page>
     );
 
-  // Fallback for expression set empty
+  // Fallback for expression set empty TODO fix style
   const word_count = expression_to_expression_set.filter(
     (item) => item.expression_set_id === expression_set.id
   ).length;
   if (!word_count)
     return (
       <Page>
-        <div className="expression-set-page">
+        <div className="page-with-padding scroll">
           <ExpressionSetInfo
             id={expression_set.id}
             name={expression_set.name}
@@ -42,14 +44,16 @@ const ExpressionSetDetailsPage: NextPage = () => {
 
   return (
     <Page>
-      <div className="expression-set-page">
+      <div className="page-with-bottom-navigation">
+        <section className="padding-small scroll">
           <ExpressionSetInfo
             id={expression_set.id}
             name={expression_set.name}
             description={expression_set.description}
             word_count={word_count}
           />
-        <p className="text-details grow">{/* TODO other details */}</p>
+        </section>
+        <section className="navigation-bottom">
           <Link
             href={{
               pathname: "/expression-sets/practice",
@@ -57,10 +61,11 @@ const ExpressionSetDetailsPage: NextPage = () => {
             }}
             passHref
           >
-          <a className="navigation-item text-navigation">
+            <a className="navigation-item-bottom text-navigation grow">
               <span>Practice this set</span>
             </a>
           </Link>
+        </section>
       </div>
     </Page>
   );

src/pages/expression-sets/index.tsx

@@ -9,7 +9,7 @@ const ExpressionSetListPage: NextPage = () => {
 
   return (
     <Page>
-      <div className="content-list">
+      <div className="page-with-padding content-list scroll">
         {expression_sets.map(({ id, name, description }) => (
           <Link
             key={id}

src/pages/expression-sets/practice.tsx

@@ -1,4 +1,5 @@
 import type { NextPage } from "next";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { ExpressionCard } from "../../components";
 import { Page } from "../../components/Page";
@@ -10,7 +11,7 @@ import {
 } from "../../util/data-utils";
 
 const ExpressionSetListPage: NextPage = () => {
-  const { query } = useRouter();
+  const { query, pathname } = useRouter();
   const {
     expressions,
     categories,
@@ -26,7 +27,7 @@ const ExpressionSetListPage: NextPage = () => {
   if (!expression_set)
     return (
       <Page>
-        <p className="details">Expression set not found</p>
+        <p className="text-details">Expression set not found</p>
       </Page>
     );
 
@@ -40,7 +41,7 @@ const ExpressionSetListPage: NextPage = () => {
   if (expression_candidates.length === 0) {
     return (
       <Page>
-        <p className="details">No expressions left in this set</p>
+        <p className="text-details">No expressions left in this set</p>
       </Page>
     );
   }
@@ -54,18 +55,30 @@ const ExpressionSetListPage: NextPage = () => {
     expression_to_category,
   });
 
-  console.log("Expressions", expressions);
-  console.log("Categories", expression_categories);
-  console.log("Expression", expression);
-
   return (
     <Page>
+      <div className="page-with-bottom-navigation">
+        <section className="padding-small scroll">
           <ExpressionCard
             prompt={expression.prompt}
             categories={expression_categories.map((category) => category.name)}
             description={expression.description}
             show_description
           />
+        </section>
+        <section className="navigation-bottom">
+          <Link href={{ pathname, query }} passHref>
+            <a className="navigation-item-bottom text-navigation grow">
+              <div>wrong</div>
+            </a>
+          </Link>
+          <Link href={{ pathname, query }} passHref>
+            <a className="navigation-item-bottom text-navigation grow">
+              <div>right</div>
+            </a>
+          </Link>
+        </section>
+      </div>
     </Page>
   );
 };

src/styles/components.css

@@ -42,9 +42,11 @@
 /* Page */
 
 .page {
-  display: flex;
-  flex-direction: column;
-
+  background-color: lavender;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 64px calc(100vh - 72px); /* Is there a keyword solution for this? */
+  grid-gap: 8px;
   height: 100vh;
   margin: auto;
   max-width: 800px;
@@ -53,19 +55,8 @@
 .page > main {
   background-color: lavender;
   display: block;
-  flex: 1;
   position: relative;
-
-  /* Will it conflict with overlays? Move elsewhere? */
-  padding: 16px;
   height: 100%;
-  overflow-y: auto;
-}
-
-.content-list {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 16px;
 }
 
 /* Navigation */
@@ -76,6 +67,12 @@
   box-shadow: 0px 5px 5px -5px darkslategray;
 }
 
+.navigation-bottom {
+  display: flex;
+  flex-direction: row;
+  box-shadow: 0px 5px 5px 5px darkslategray;
+}
+
 .navigation > .navigation-li {
   flex: 1;
 }
@@ -96,6 +93,18 @@
   height: 64px;
 }
 
+.navigation-item-bottom {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  background-color: lavenderblush;
+  border: 1px solid darkslategray;
+  height: 80px;
+}
+
 .navigation-item:hover {
   background-color: antiquewhite;
 }
@@ -119,21 +128,8 @@
   border: 1px solid slategray;
 }
 
-/* tofix */
-
-.details {
-  color: darkslategray;
-  font-size: 15px;
-  margin: 20px 0px;
-  overflow-y: auto;
-}
-
 /* Content organization */
 
-.content-page {
-  padding: 16px;
-}
-
 .content-card {
   background-color: lavender;
   border: 1px solid darkslategray;
@@ -145,17 +141,42 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+}
+
+.content-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content-list > * + * {
+  margin-top: 16px;
+}
+
+/* Margins and paddings */
+
+.padding-small {
+  padding: 8px 16px;
+}
+
+.margin-small {
   margin: 10px 0px;
 }
 
-.content-paragraph {
+.margin-paragraph {
   margin: 20px 0px 10px;
 }
 
 /* Expression set page */
 
-.expression-set-page {
-  display: flex;
-  flex-direction: column;
+.page-with-padding {
+  padding: 8px 16px 16px;
+}
+
+.page-with-bottom-navigation {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: calc(100% - 88px) 80px;
+  grid-gap: 8px;
   height: 100%;
 }