From e76b22b2ae40b2fb286d9b57e1d7eb4f47b7dd46 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 6 Mar 2021 17:30:21 +0100
Subject: [PATCH] Ensured consistent heights in settings cards

---
 src/settings/RealTimeUpdates.tsx  | 2 +-
 src/settings/Settings.tsx         | 4 ++--
 src/settings/ShortUrlCreation.tsx | 2 +-
 src/settings/UserInterface.tsx    | 2 +-
 src/settings/Visits.tsx           | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/settings/RealTimeUpdates.tsx b/src/settings/RealTimeUpdates.tsx
index d737f6e9..46ac074e 100644
--- a/src/settings/RealTimeUpdates.tsx
+++ b/src/settings/RealTimeUpdates.tsx
@@ -15,7 +15,7 @@ const intervalValue = (interval?: number) => !interval ? '' : `${interval}`;
 const RealTimeUpdates = (
   { settings: { realTimeUpdates }, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps,
 ) => (
-  <SimpleCard title="Real-time updates">
+  <SimpleCard title="Real-time updates" className="h-100">
     <FormGroup>
       <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
         Enable or disable real-time updates, when using Shlink v2.2.0 or newer.
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 8305442e..1c9a1b36 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -7,8 +7,8 @@ const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
     {items.map((child, index) => (
       <Row key={index}>
         {child.map((subChild, subIndex) => (
-          <div key={subIndex} className="col-lg-6">
-            <div className="mb-3 mb-md-4">{subChild}</div>
+          <div key={subIndex} className="col-lg-6 mb-3 mb-md-4">
+            {subChild}
           </div>
         ))}
       </Row>
diff --git a/src/settings/ShortUrlCreation.tsx b/src/settings/ShortUrlCreation.tsx
index afd88c12..b91ed500 100644
--- a/src/settings/ShortUrlCreation.tsx
+++ b/src/settings/ShortUrlCreation.tsx
@@ -12,7 +12,7 @@ interface ShortUrlCreationProps {
 export const ShortUrlCreation: FC<ShortUrlCreationProps> = (
   { settings: { shortUrlCreation }, setShortUrlCreationSettings },
 ) => (
-  <SimpleCard title="Short URLs creation">
+  <SimpleCard title="Short URLs creation" className="h-100">
     <FormGroup className="mb-0">
       <ToggleSwitch
         checked={shortUrlCreation?.validateUrls ?? false}
diff --git a/src/settings/UserInterface.tsx b/src/settings/UserInterface.tsx
index 3180ebc4..9a915078 100644
--- a/src/settings/UserInterface.tsx
+++ b/src/settings/UserInterface.tsx
@@ -13,7 +13,7 @@ interface UserInterfaceProps {
 }
 
 export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
-  <SimpleCard title="User interface">
+  <SimpleCard title="User interface" className="h-100">
     <FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
     <ToggleSwitch
       checked={ui?.theme === 'dark'}
diff --git a/src/settings/Visits.tsx b/src/settings/Visits.tsx
index baca1fd0..6100cb5b 100644
--- a/src/settings/Visits.tsx
+++ b/src/settings/Visits.tsx
@@ -10,7 +10,7 @@ interface VisitsProps {
 }
 
 export const Visits: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
-  <SimpleCard title="Visits">
+  <SimpleCard title="Visits" className="h-100">
     <FormGroup className="mb-0">
       <label>Default interval to load on visits sections:</label>
       <DateIntervalSelector