WIP

src/ui/components/GameTabs.css

@@ -26,6 +26,10 @@
   column-gap: 0.5rem;
 }
 
+.span2 {
+  grid-row-end: span 2;
+}
+
 .span3 {
   grid-row-end: span 3;
 }

src/ui/components/GameTabs.tsx

@@ -54,8 +54,14 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
       <Switch>
         <Match when={state.activeTab === "game"}>
           <Info handlers={props.handlers}></Info>
-          <Moves moves={props.moves} handlers={props.handlers} />
+          <Moves
-          <Controls handlers={props.handlers} />
+            moves={props.moves}
+            handlers={props.handlers}
+            class={state.layout === "single" ? "span2" : undefined}
+          />
+          <Show when={state.layout !== "single"}>
+            <Controls handlers={props.handlers} />
+          </Show>
         </Match>
         <Match when={state.activeTab === "load"}>
           <Load handlers={props.handlers} class="span3" />

src/ui/components/Header.tsx

@@ -12,9 +12,9 @@ const Header: Component<{ handlers: Handlers }> = () => {
         <div class="header__logo-pic" />
       </div>
       <div class="header__options">
-        <div class="header__options-ico" onClick={() => {}}>
+        {/* <div class="header__options-ico" onClick={() => {}}>
           <i class="las la-question-circle"></i>
-        </div>
+        </div> */}
         <div
           class="header__options-ico"
           onClick={() => {

src/ui/components/Moves.tsx

@@ -5,9 +5,11 @@ import Scrollable from "./reusable/Scrollable";
 import "./Moves.css";
 import { state } from "../../state";
 
-const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
+const Moves: Component<{
-  props
+  moves: readonly string[];
-) => {
+  handlers: Handlers;
+  class?: string;
+}> = (props) => {
   createEffect(() => {
     if (!state.mobile) {
       document.querySelector(`[data-ply="${state.ply}"]`)?.scrollIntoView();
@@ -15,7 +17,7 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
   });
 
   return (
-    <Scrollable class="moves">
+    <Scrollable class={"moves" + (props.class ? ` ${props.class}` : "")}>
       <Show when={props.moves.length === 0}>
         <p class="moves__turn">
           {state.game.getPosition(0).turn === "w" ? "White" : "Black"} to move.