From 99a4141a7d590f3f489106269003aba1fde1cb06 Mon Sep 17 00:00:00 2001
From: Uriel <imurx@proton.me>
Date: Wed, 16 Oct 2024 18:52:06 +0200
Subject: [PATCH] Fix spacing issues on advanced settings (#1198)

---
 .../settings/pages/AdvancedSettings.tsx        | 18 +++++++++---------
 gui/tailwind.config.ts                         |  1 +
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/gui/src/components/settings/pages/AdvancedSettings.tsx b/gui/src/components/settings/pages/AdvancedSettings.tsx
index 1df13fa03..9130b70e3 100644
--- a/gui/src/components/settings/pages/AdvancedSettings.tsx
+++ b/gui/src/components/settings/pages/AdvancedSettings.tsx
@@ -56,13 +56,13 @@ export function AdvancedSettings() {
               {l10n.getString('settings-utils-advanced')}
             </Typography>
 
-            <div className="grid gap-4 mobile:gap-6">
+            <div className="grid gap-4">
               <div className="sm:grid sm:grid-cols-[1.75fr,_1fr] items-center">
                 <div>
                   <Typography bold>
                     {l10n.getString('settings-utils-advanced-reset-gui')}
                   </Typography>
-                  <div className="flex flex-col pt-1">
+                  <div className="flex flex-col">
                     <Typography color="secondary">
                       {l10n.getString(
                         'settings-utils-advanced-reset-gui-description'
@@ -70,7 +70,7 @@ export function AdvancedSettings() {
                     </Typography>
                   </div>
                 </div>
-                <div className="flex flex-col">
+                <div className="flex flex-col nsm:pt-2">
                   <Button
                     variant="secondary"
                     onClick={() => setShowWarningGUI(true)}
@@ -94,7 +94,7 @@ export function AdvancedSettings() {
                   <Typography bold>
                     {l10n.getString('settings-utils-advanced-reset-server')}
                   </Typography>
-                  <div className="flex flex-col pt-1">
+                  <div className="flex flex-col">
                     <Typography color="secondary">
                       {l10n.getString(
                         'settings-utils-advanced-reset-server-description'
@@ -102,7 +102,7 @@ export function AdvancedSettings() {
                     </Typography>
                   </div>
                 </div>
-                <div className="flex flex-col">
+                <div className="flex flex-col nsm:pt-2">
                   <Button
                     variant="secondary"
                     onClick={() => setShowWarningServer(true)}
@@ -131,7 +131,7 @@ export function AdvancedSettings() {
                   <Typography bold>
                     {l10n.getString('settings-utils-advanced-reset-all')}
                   </Typography>
-                  <div className="flex flex-col pt-1">
+                  <div className="flex flex-col">
                     <Typography color="secondary">
                       {l10n.getString(
                         'settings-utils-advanced-reset-all-description'
@@ -139,7 +139,7 @@ export function AdvancedSettings() {
                     </Typography>
                   </div>
                 </div>
-                <div className="flex flex-col">
+                <div className="flex flex-col nsm:pt-2">
                   <Button
                     variant="secondary"
                     onClick={() => setShowWarningAll(true)}
@@ -167,7 +167,7 @@ export function AdvancedSettings() {
                   <Typography bold>
                     {l10n.getString('settings-utils-advanced-open_data')}
                   </Typography>
-                  <div className="flex flex-col pt-1">
+                  <div className="flex flex-col">
                     <Typography color="secondary">
                       {l10n.getString(
                         'settings-utils-advanced-open_data-description'
@@ -175,7 +175,7 @@ export function AdvancedSettings() {
                     </Typography>
                   </div>
                 </div>
-                <div className="flex flex-col">
+                <div className="flex flex-col nsm:pt-2">
                   <Button variant="secondary" onClick={openConfigFolder}>
                     {l10n.getString('settings-utils-advanced-open_data-label')}
                   </Button>
diff --git a/gui/tailwind.config.ts b/gui/tailwind.config.ts
index 3ecedb7ce..6d8d6bbb6 100644
--- a/gui/tailwind.config.ts
+++ b/gui/tailwind.config.ts
@@ -160,6 +160,7 @@ const config = {
       smol: '525px',
       mobile: { raw: 'not (min-width: 800px)' },
       xs: '800px',
+      nsm: { raw: 'not (min-width: 900px)' },
       sm: '900px',
       md: '1100px',
       'md-max': { raw: 'not (min-width: 1100px)' },