WIP

src/ui/components/Boards.css

@@ -5,7 +5,6 @@
 }
 
 .boards__ico {
-  margin: 0.2rem;
   cursor: pointer;
   width: 8.2rem;
   height: 8.2rem;

src/ui/components/GameTabs.css

@@ -6,13 +6,6 @@
   height: 100vh;
 }
 
-@media (orientation: portrait) {
-  .game-box {
-    padding: 0;
-    height: 800px;
-  }
-}
-
 .game {
   height: 100%;
   display: grid;
@@ -37,3 +30,15 @@
 .span3 {
   grid-row-end: span 3;
 }
+
+@media (orientation: portrait) {
+  .game-box {
+    padding: 0;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .game {
+    display: block;
+  }
+}

src/ui/components/Header.tsx

@@ -9,7 +9,9 @@ const Header: Component<{ handlers: Handlers }> = (props) => {
   return (
     <header class="header-box">
       <div class="header__logo">
-        <div class="header__logo-pic" />
+        <a href="/">
+          <div class="header__logo-pic" />
+        </a>
       </div>
       <div class="header__options">
         {/* <div class="header__options-ico" onClick={() => {}}>

src/ui/components/Info.tsx

@@ -83,6 +83,18 @@ const Info: Component<{ handlers: Handlers }> = () => {
             </Show>
           </p>
         </Show>
+        <Show when={state.pgn === ""}>
+          <p>
+            <a
+              href={`https://lichess.org/analysis/${state.fen.replace(
+                /\s+/g,
+                "_"
+              )}`}
+            >
+              Analyze on Lichess
+            </a>
+          </p>
+        </Show>
         <Show when={state.game.header.DatePretty}>
           <p>{state.game.header.DatePretty}</p>
         </Show>

src/ui/components/reusable/Scrollable.css

@@ -1,6 +1,5 @@
 .scrollable {
   background: var(--color-bg-block);
-  height: auto;
   padding: 2rem 1rem 2rem 2rem;
   height: 100%;
   display: flex;
@@ -29,3 +28,10 @@
   background-color: var(--color-scrollbar);
   outline: 1px solid var(--color-scrollbar);
 }
+
+@media (orientation: portrait) {
+  .scrollable {
+    height: auto;
+    display: block;
+  }
+}