Remove repo link on small screens

public/index.html

@@ -474,11 +474,6 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div class="github-link">
-      <a href="https://github.com/sgwilym/seasonal-hours-clock">
-        source code
-      </a>
-    </div>
     <div id="root"></div>
   </body>
 </html>

src/App.tsx

@@ -7,6 +7,7 @@ import { hourTable } from "./seasonal-hours";
 import Resizer from "./resizer";
 import NowUpdater from "./now-updater";
 import { Clock } from "./clock";
+import RepoLink from "./repo-link";
 
 let url = new URL(window.location.href);
 
@@ -134,6 +135,7 @@ export default function App() {
             hourTable={hourTable}
           />
         </NowUpdater>
+        <RepoLink />
       </Resizer>
     </div>
   );

src/repo-link.tsx

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+
+import { ViewportSizeContext } from "./viewport-size-context";
+
+export default function RepoLink() {
+  const { height, width } = useContext(ViewportSizeContext);
+
+  let show_about = Math.abs(height - width) >= 150 || width >= 300;
+
+  return (
+    show_about && (
+      <div className="github-link">
+        <a href="https://github.com/sgwilym/seasonal-hours-clock">about</a>
+      </div>
+    )
+  );
+}