From 70fb62fd6f8bc5996bc65f6502a56db6f9cb80c7 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Wed, 17 Apr 2024 10:11:45 +0100
Subject: [PATCH] Adjust CSS

---
 src/lib/navigation/nav.svelte | 12 ++++++++----
 src/routes/more/+page.svelte  |  3 +++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/navigation/nav.svelte b/src/lib/navigation/nav.svelte
index 14e1f33..cad65fc 100644
--- a/src/lib/navigation/nav.svelte
+++ b/src/lib/navigation/nav.svelte
@@ -3,27 +3,31 @@
     {
       title: 'Home',
       path: '/',
-      svgPath: '/images/navigation/home.svg'
+      svgPath: '/images/navigation/home.svg',
+      icon: IconHome
     },
     {
       title: 'PIS Finder',
       path: '/pis/',
-      svgPath: '/images/navigation/info.svg'
+      svgPath: '/images/navigation/info.svg',
+      icon: IconNumbers
     },
     {
       title: 'Menu',
       path: '/more/',
-      svgPath: '/images/navigation/more.svg'
+      svgPath: '/images/navigation/more.svg',
+      icon: IconMenu2
     }
   ];
   import { page } from '$app/stores';
+  import { IconHome, IconMenu2, IconNumbers } from '@tabler/icons-svelte';
 </script>
 
 <footer>
   
   {#each links as item}
     <a href={item.path} class:active={$page.url.pathname == item.path}>
-      <img src={item.svgPath} alt={item.title} />
+      <svelte:component this={item.icon} />
       <br />
       <span>{item.title}</span>
     </a>
diff --git a/src/routes/more/+page.svelte b/src/routes/more/+page.svelte
index 16eee29..bb06c9f 100644
--- a/src/routes/more/+page.svelte
+++ b/src/routes/more/+page.svelte
@@ -40,6 +40,7 @@
     border-style: solid;
     border-left: none;
     padding-left: 0.5rem;
+    overflow-x: hidden;
     border-right: none;
     height: 50px;
     display: flex;
@@ -50,6 +51,7 @@
     text-decoration: none;
     height: 100%;
     vertical-align: middle;
+    overflow-x: hidden;
   }
   p {
     color: white;
@@ -60,6 +62,7 @@
     vertical-align: middle;
     font-weight: 600;
     font-size: 20px;
+    overflow-x: hidden;
   }
   @media (min-width: 600px) {
     p {