From c3d8eba264b36923d5bab4bfbe5fd77476fb190f Mon Sep 17 00:00:00 2001
From: 0forks <114709761+0forks@users.noreply.github.com>
Date: Mon, 16 Jan 2023 17:19:28 +0300
Subject: [PATCH] gui: Fix UI wrapping in settings (#467)

---
 .../settings/pages/GeneralSettings.tsx        | 147 ++++++++----------
 .../components/tracker/TrackerSettings.tsx    |  44 +++---
 2 files changed, 85 insertions(+), 106 deletions(-)

diff --git a/gui/src/components/settings/pages/GeneralSettings.tsx b/gui/src/components/settings/pages/GeneralSettings.tsx
index 2e144f753..1ca0e2dbe 100644
--- a/gui/src/components/settings/pages/GeneralSettings.tsx
+++ b/gui/src/components/settings/pages/GeneralSettings.tsx
@@ -437,18 +437,16 @@ export function GeneralSettings() {
             )}
           </Typography>
           <div className="flex flex-col pt-2 pb-4">
-            <Typography color="secondary">
-              {l10n
-                .getString(
-                  'settings-general-tracker_mechanics-drift_compensation-description'
-                )
-                .split('\n')
-                .map((line, i) => (
-                  <Typography color="secondary" key={i}>
-                    {line}
-                  </Typography>
-                ))}
-            </Typography>
+            {l10n
+              .getString(
+                'settings-general-tracker_mechanics-drift_compensation-description'
+              )
+              .split('\n')
+              .map((line, i) => (
+                <Typography color="secondary" key={i}>
+                  {line}
+                </Typography>
+              ))}
           </div>
           <CheckBox
             variant="toggle"
@@ -758,76 +756,61 @@ export function GeneralSettings() {
           <Typography variant="main-title">
             {l10n.getString('settings-general-interface')}
           </Typography>
-          <div className="gap-4 grid">
-            <div className="grid sm:grid-cols-2">
-              <div>
-                <Typography bold>
-                  {l10n.getString('settings-general-interface-dev_mode')}
-                </Typography>
-                <div className="flex flex-col">
-                  <Typography color="secondary">
-                    {l10n.getString(
-                      'settings-general-interface-dev_mode-description'
-                    )}
-                  </Typography>
-                </div>
-                <div className="pt-2">
-                  <CheckBox
-                    variant="toggle"
-                    control={control}
-                    outlined
-                    name="interface.devmode"
-                    label={l10n.getString(
-                      'settings-general-interface-dev_mode-label'
-                    )}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="grid sm:grid-cols-2">
-              <div>
-                <Typography bold>
-                  {l10n.getString(
-                    'settings-general-interface-serial_detection'
-                  )}
-                </Typography>
-                <div className="flex flex-col">
-                  <Typography color="secondary">
-                    {l10n.getString(
-                      'settings-general-interface-serial_detection-description'
-                    )}
-                  </Typography>
-                </div>
-                <div className="pt-2">
-                  <CheckBox
-                    variant="toggle"
-                    control={control}
-                    outlined
-                    name="interface.watchNewDevices"
-                    label={l10n.getString(
-                      'settings-general-interface-serial_detection-label'
-                    )}
-                  />
-                </div>
-              </div>
-            </div>
-            <div className="grid sm:grid-cols-2">
-              <div>
-                <Typography bold>
-                  {l10n.getString('settings-general-interface-lang')}
-                </Typography>
-                <div className="flex flex-col">
-                  <Typography color="secondary">
-                    {l10n.getString(
-                      'settings-general-interface-lang-description'
-                    )}
-                  </Typography>
-                </div>
-                <div className="pt-2">
-                  <LangSelector />
-                </div>
-              </div>
-            </div>
+
+          <Typography bold>
+            {l10n.getString('settings-general-interface-dev_mode')}
+          </Typography>
+          <div className="flex flex-col pt-1 pb-2">
+            <Typography color="secondary">
+              {l10n.getString(
+                'settings-general-interface-dev_mode-description'
+              )}
+            </Typography>
+          </div>
+          <div className="grid sm:grid-cols-2 pb-4">
+            <CheckBox
+              variant="toggle"
+              control={control}
+              outlined
+              name="interface.devmode"
+              label={l10n.getString(
+                'settings-general-interface-dev_mode-label'
+              )}
+            />
+          </div>
+
+          <Typography bold>
+            {l10n.getString('settings-general-interface-serial_detection')}
+          </Typography>
+          <div className="flex flex-col pt-1 pb-2">
+            <Typography color="secondary">
+              {l10n.getString(
+                'settings-general-interface-serial_detection-description'
+              )}
+            </Typography>
+          </div>
+          <div className="grid sm:grid-cols-2 pb-4">
+            <CheckBox
+              variant="toggle"
+              control={control}
+              outlined
+              name="interface.watchNewDevices"
+              label={l10n.getString(
+                'settings-general-interface-serial_detection-label'
+              )}
+            />
+          </div>
+
+          <Typography bold>
+            {l10n.getString('settings-general-interface-lang')}
+          </Typography>
+          <div className="flex flex-col pt-1 pb-2">
+            <Typography color="secondary">
+              {l10n.getString('settings-general-interface-lang-description')}
+            </Typography>
+          </div>
+          <div className="grid sm:grid-cols-2 pb-4">
+            <LangSelector />
           </div>
         </>
       </SettingsPageLayout>
diff --git a/gui/src/components/tracker/TrackerSettings.tsx b/gui/src/components/tracker/TrackerSettings.tsx
index 445c70a46..8c1d49a0b 100644
--- a/gui/src/components/tracker/TrackerSettings.tsx
+++ b/gui/src/components/tracker/TrackerSettings.tsx
@@ -162,7 +162,7 @@ export function TrackerSettingsPage() {
         onClose={() => setSelectRotation(false)}
         onDirectionSelected={onDirectionSelected}
       ></MountingSelectionMenu>
-      <div className="flex gap-2 md:h-full flex-wrap md:flex-row ">
+      <div className="flex gap-2 md:h-full max-md:flex-wrap md:flex-row ">
         <div className="flex flex-col w-full md:max-w-xs gap-2">
           {tracker && (
             <TrackerCard
@@ -284,31 +284,27 @@ export function TrackerSettingsPage() {
             </div>
           </div>
           {tracker?.tracker.info?.isImu && (
-            <>
-              <div className="flex flex-col gap-2 w-full mt-3">
-                <Typography variant="section-title">
-                  {l10n.getString(
-                    'tracker-settings-drift_compensation_section'
+            <div className="flex flex-col gap-2 w-full mt-3">
+              <Typography variant="section-title">
+                {l10n.getString('tracker-settings-drift_compensation_section')}
+              </Typography>
+              <Typography color="secondary">
+                {l10n.getString(
+                  'tracker-settings-drift_compensation_section-description'
+                )}
+              </Typography>
+              <div className="flex">
+                <CheckBox
+                  variant="toggle"
+                  outlined
+                  name="allowDriftCompensation"
+                  control={control}
+                  label={l10n.getString(
+                    'tracker-settings-drift_compensation_section-edit'
                   )}
-                </Typography>
-                <Typography color="secondary">
-                  {l10n.getString(
-                    'tracker-settings-drift_compensation_section-description'
-                  )}
-                </Typography>
-                <div className="flex">
-                  <CheckBox
-                    variant="toggle"
-                    outlined
-                    name="allowDriftCompensation"
-                    control={control}
-                    label={l10n.getString(
-                      'tracker-settings-drift_compensation_section-edit'
-                    )}
-                  />
-                </div>
+                />
               </div>
-            </>
+            </div>
           )}
           <div className="flex flex-col gap-2 w-full mt-3">
             <Typography variant="section-title">