From f1d413b6efaad82d0debcaec023bec867b474861 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Mon, 5 Jul 2021 16:24:25 +0200
Subject: [PATCH] Fix: Small mobile fixes, paddings

---
 src/components/navigation/items/Item.module.scss | 12 ++++++++----
 src/pages/settings/GenericSettings.tsx           |  4 ++--
 src/pages/settings/panes/Panes.module.scss       |  9 +++++++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss
index 8251d4c3..d5e4ff33 100644
--- a/src/components/navigation/items/Item.module.scss
+++ b/src/components/navigation/items/Item.module.scss
@@ -147,14 +147,18 @@
 
 @media (pointer: coarse) {
     .item {
-        height: 55px;
+        height: 40px;
 
         &.compact {
             height: 50px;
 
-            div > svg {
-                height: 22px;
-                width: 22px;
+            > div {
+                gap: 20px;
+
+                > svg {
+                    height: 24px;
+                    width: 24px;
+                }
             }
         }
     }
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index baea15ac..b1206b0a 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -85,7 +85,7 @@ export function GenericSettings({
                         <>
                             {showExitButton && (
                                 <IconButton onClick={exitSettings}>
-                                    <X size={24} />
+                                    <X size={27} style={{marginInlineEnd: "8px"}} />
                                 </IconButton>
                             )}
                             <Text id="app.settings.title" />
@@ -93,7 +93,7 @@ export function GenericSettings({
                     ) : (
                         <>
                             <IconButton onClick={() => switchPage()}>
-                                <ArrowBack size={24} />
+                                <ArrowBack size={24} style={{marginInlineEnd: "10px"}} />
                             </IconButton>
                             <Text
                                 id={`app.settings.${category}.${page}.title`}
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 20681020..2b40d279 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -186,12 +186,21 @@
             text-transform: unset;
 
             a {
+                
                 opacity: 0.7;
                 color: var(--accent);
                 font-weight: 600;
                 &:hover {
                     text-decoration: underline;
                 }
+
+                
+            }
+
+            @media only screen and (max-width: 800px) {
+                a {
+                    display: block;
+                }
             }
         }
     }