Start using Cell Group for spacing between and after cells

13 files changed, 271 insertions, 278 deletions

diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
index 99362eed93..4fb785d686 100644
--- a/gui/src/renderer/components/CustomDnsSettings.tsx
+++ b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -24,7 +24,6 @@ import {
   StyledButton,
   StyledContainer,
   StyledCustomDnsFooter,
-  StyledCustomDnsSwitchContainer,
   StyledLabel,
   StyledRemoveButton,
   StyledRemoveIcon,
@@ -216,7 +215,7 @@ export default function CustomDnsSettings() {
 
   return (
     <>
-      <StyledCustomDnsSwitchContainer disabled={!featureAvailable}>
+      <Cell.Container disabled={!featureAvailable}>
         <AriaInputGroup>
           <AriaLabel>
             <Cell.InputLabel>
@@ -231,7 +230,7 @@ export default function CustomDnsSettings() {
             />
           </AriaInput>
         </AriaInputGroup>
-      </StyledCustomDnsSwitchContainer>
+      </Cell.Container>
       <Accordion expanded={listExpanded}>
         <Cell.Section role="listbox">
           <List
diff --git a/gui/src/renderer/components/CustomDnsSettingsStyles.tsx b/gui/src/renderer/components/CustomDnsSettingsStyles.tsx
index b8ec59ec36..9d927ba52d 100644
--- a/gui/src/renderer/components/CustomDnsSettingsStyles.tsx
+++ b/gui/src/renderer/components/CustomDnsSettingsStyles.tsx
@@ -4,10 +4,6 @@ import { colors } from '../../config.json';
 import * as Cell from './cell';
 import ImageView from './ImageView';
 
-export const StyledCustomDnsSwitchContainer = styled(Cell.Container)({
-  marginBottom: '1px',
-});
-
 export const StyledCustomDnsFooter = styled(Cell.Footer)({
   marginBottom: '2px',
 });
@@ -32,7 +28,6 @@ export const StyledAddCustomDnsLabel = styled(Cell.Label)(
 
 export const StyledContainer = styled(Cell.Container)({
   display: 'flex',
-  marginBottom: '1px',
   backgroundColor: colors.blue40,
 });
 
diff --git a/gui/src/renderer/components/Filter.tsx b/gui/src/renderer/components/Filter.tsx
index d974fa7f6a..1798985070 100644
--- a/gui/src/renderer/components/Filter.tsx
+++ b/gui/src/renderer/components/Filter.tsx
@@ -288,7 +288,6 @@ const StyledRow = styled.div({
   height: '44px',
   alignItems: 'center',
   padding: '0 22px',
-  marginBottom: '1px',
   backgroundColor: colors.blue,
 });
 
diff --git a/gui/src/renderer/components/List.tsx b/gui/src/renderer/components/List.tsx
index 2d4f73b7f1..2915a95c1b 100644
--- a/gui/src/renderer/components/List.tsx
+++ b/gui/src/renderer/components/List.tsx
@@ -1,10 +1,18 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
 
 import { Scheduler } from '../../shared/scheduler';
 import Accordion from './Accordion';
 
 export const stringValueAsKey = (value: string): string => value;
 
+const StyledListItem = styled.div({
+  marginBottom: '1px',
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+});
+
 interface ListProps<T> {
   items: Array<T>;
   getKey: (data: T) => string;
@@ -112,7 +120,7 @@ function ListItem<T>(props: ListItemProps<T>) {
 
   return (
     <Accordion expanded={expanded} onTransitionEnd={onTransitionEnd}>
-      {props.render(props.data.data)}
+      <StyledListItem>{props.render(props.data.data)}</StyledListItem>
     </Accordion>
   );
 }
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index 50419bc838..7b2b0e9b20 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -329,7 +329,7 @@ export class RelayLocations extends React.PureComponent<
 
   public render() {
     return (
-      <>
+      <Cell.Group noMarginBottom>
         {this.state.countries.map((relayCountry) => {
           const countryLocation: RelayLocation = { country: relayCountry.code };
 
@@ -384,7 +384,7 @@ export class RelayLocations extends React.PureComponent<
             </LocationRow>
           );
         })}
-      </>
+      </Cell.Group>
     );
   }
 
diff --git a/gui/src/renderer/components/LocationRow.tsx b/gui/src/renderer/components/LocationRow.tsx
index fd406f2487..f3d0927c6f 100644
--- a/gui/src/renderer/components/LocationRow.tsx
+++ b/gui/src/renderer/components/LocationRow.tsx
@@ -41,7 +41,6 @@ const buttonColor = (props: IButtonColorProps) => {
 const Container = styled(Cell.Container)({
   display: 'flex',
   padding: 0,
-  marginBottom: '1px',
   background: 'none',
 });
 
@@ -154,7 +153,7 @@ function LocationRow(props: IProps, ref: React.Ref<HTMLDivElement>) {
           onWillExpand={onWillExpand}
           onTransitionEnd={props.onTransitionEnd}
           animationDuration={150}>
-          {props.children}
+          <Cell.Group noMarginBottom>{props.children}</Cell.Group>
         </Accordion>
       )}
     </>
diff --git a/gui/src/renderer/components/OpenVPNSettings.tsx b/gui/src/renderer/components/OpenVPNSettings.tsx
index a6e3d551a1..1b82c9971a 100644
--- a/gui/src/renderer/components/OpenVPNSettings.tsx
+++ b/gui/src/renderer/components/OpenVPNSettings.tsx
@@ -119,120 +119,126 @@ export default class OpenVpnSettings extends React.Component<IProps, IState> {
                   </HeaderTitle>
                 </SettingsHeader>
 
-                <StyledSelectorContainer>
-                  <AriaInputGroup>
-                    <Selector
-                      title={messages.pgettext('openvpn-settings-view', 'Transport protocol')}
-                      values={this.protocolItems(this.props.bridgeState !== 'on')}
-                      value={this.props.openvpn.protocol}
-                      onSelect={this.onSelectOpenvpnProtocol}
-                      hasFooter={this.props.bridgeState === 'on'}
-                    />
-                    {this.props.bridgeState === 'on' && (
-                      <Cell.Footer>
-                        <AriaDescription>
-                          <Cell.FooterText>
-                            {formatMarkdown(
-                              // TRANSLATORS: This is used to instruct users how to make UDP mode
-                              // TRANSLATORS: available.
-                              messages.pgettext(
-                                'openvpn-settings-view',
-                                'To activate UDP, change **Bridge mode** to **Automatic** or **Off**.',
-                              ),
-                            )}
-                          </Cell.FooterText>
-                        </AriaDescription>
-                      </Cell.Footer>
-                    )}
-                  </AriaInputGroup>
-                </StyledSelectorContainer>
+                <Cell.Group>
+                  <StyledSelectorContainer>
+                    <AriaInputGroup>
+                      <Selector
+                        title={messages.pgettext('openvpn-settings-view', 'Transport protocol')}
+                        values={this.protocolItems(this.props.bridgeState !== 'on')}
+                        value={this.props.openvpn.protocol}
+                        onSelect={this.onSelectOpenvpnProtocol}
+                      />
+                      {this.props.bridgeState === 'on' && (
+                        <Cell.Footer>
+                          <AriaDescription>
+                            <Cell.FooterText>
+                              {formatMarkdown(
+                                // TRANSLATORS: This is used to instruct users how to make UDP mode
+                                // TRANSLATORS: available.
+                                messages.pgettext(
+                                  'openvpn-settings-view',
+                                  'To activate UDP, change **Bridge mode** to **Automatic** or **Off**.',
+                                ),
+                              )}
+                            </Cell.FooterText>
+                          </AriaDescription>
+                        </Cell.Footer>
+                      )}
+                    </AriaInputGroup>
+                  </StyledSelectorContainer>
+                </Cell.Group>
+
+                {this.props.openvpn.protocol ? (
+                  <Cell.Group>
+                    <StyledSelectorContainer>
+                      <AriaInputGroup>
+                        <Selector
+                          title={sprintf(
+                            // TRANSLATORS: The title for the port selector section.
+                            // TRANSLATORS: Available placeholders:
+                            // TRANSLATORS: %(portType)s - a selected protocol (either TCP or UDP)
+                            messages.pgettext('openvpn-settings-view', '%(portType)s port'),
+                            {
+                              portType: this.props.openvpn.protocol.toUpperCase(),
+                            },
+                          )}
+                          values={this.portItems[this.props.openvpn.protocol]}
+                          value={this.props.openvpn.port}
+                          onSelect={this.onSelectOpenVpnPort}
+                        />
+                      </AriaInputGroup>
+                    </StyledSelectorContainer>
+                  </Cell.Group>
+                ) : undefined}
 
-                <StyledSelectorContainer>
+                <Cell.Group>
                   <AriaInputGroup>
-                    {this.props.openvpn.protocol ? (
+                    <StyledSelectorContainer>
                       <Selector
-                        title={sprintf(
-                          // TRANSLATORS: The title for the port selector section.
-                          // TRANSLATORS: Available placeholders:
-                          // TRANSLATORS: %(portType)s - a selected protocol (either TCP or UDP)
-                          messages.pgettext('openvpn-settings-view', '%(portType)s port'),
-                          {
-                            portType: this.props.openvpn.protocol.toUpperCase(),
-                          },
+                        title={
+                          // TRANSLATORS: The title for the shadowsocks bridge selector section.
+                          messages.pgettext('openvpn-settings-view', 'Bridge mode')
+                        }
+                        values={this.bridgeStateItems(
+                          this.props.bridgeModeAvailablity === BridgeModeAvailability.available,
                         )}
-                        values={this.portItems[this.props.openvpn.protocol]}
-                        value={this.props.openvpn.port}
-                        onSelect={this.onSelectOpenVpnPort}
+                        value={this.props.bridgeState}
+                        onSelect={this.onSelectBridgeState}
                       />
-                    ) : undefined}
+                    </StyledSelectorContainer>
+                    <Cell.Footer>
+                      <AriaDescription>
+                        <Cell.FooterText>{this.bridgeModeFooterText()}</Cell.FooterText>
+                      </AriaDescription>
+                    </Cell.Footer>
                   </AriaInputGroup>
-                </StyledSelectorContainer>
+                </Cell.Group>
 
-                <AriaInputGroup>
-                  <StyledSelectorContainer>
-                    <Selector
-                      title={
-                        // TRANSLATORS: The title for the shadowsocks bridge selector section.
-                        messages.pgettext('openvpn-settings-view', 'Bridge mode')
-                      }
-                      values={this.bridgeStateItems(
-                        this.props.bridgeModeAvailablity === BridgeModeAvailability.available,
-                      )}
-                      value={this.props.bridgeState}
-                      onSelect={this.onSelectBridgeState}
-                      hasFooter
-                    />
-                  </StyledSelectorContainer>
-                  <Cell.Footer>
-                    <AriaDescription>
-                      <Cell.FooterText>{this.bridgeModeFooterText()}</Cell.FooterText>
-                    </AriaDescription>
-                  </Cell.Footer>
-                </AriaInputGroup>
-
-                <AriaInputGroup>
-                  <Cell.Container>
-                    <AriaLabel>
-                      <Cell.InputLabel>
-                        {messages.pgettext('openvpn-settings-view', 'Mssfix')}
-                      </Cell.InputLabel>
-                    </AriaLabel>
-                    <AriaInput>
-                      <Cell.AutoSizingTextInput
-                        value={this.props.mssfix ? this.props.mssfix.toString() : ''}
-                        inputMode={'numeric'}
-                        maxLength={4}
-                        placeholder={messages.gettext('Default')}
-                        onSubmitValue={this.onMssfixSubmit}
-                        validateValue={OpenVpnSettings.mssfixIsValid}
-                        submitOnBlur={true}
-                        modifyValue={OpenVpnSettings.removeNonNumericCharacters}
-                      />
-                    </AriaInput>
-                  </Cell.Container>
-                  <Cell.Footer>
-                    <AriaDescription>
-                      <Cell.FooterText>
-                        {sprintf(
-                          // TRANSLATORS: The hint displayed below the Mssfix input field.
-                          // TRANSLATORS: Available placeholders:
-                          // TRANSLATORS: %(openvpn)s - will be replaced with "OpenVPN"
-                          // TRANSLATORS: %(max)d - the maximum possible mssfix value
-                          // TRANSLATORS: %(min)d - the minimum possible mssfix value
-                          messages.pgettext(
-                            'openvpn-settings-view',
-                            'Set %(openvpn)s MSS value. Valid range: %(min)d - %(max)d.',
-                          ),
-                          {
-                            openvpn: strings.openvpn,
-                            min: MIN_MSSFIX_VALUE,
-                            max: MAX_MSSFIX_VALUE,
-                          },
-                        )}
-                      </Cell.FooterText>
-                    </AriaDescription>
-                  </Cell.Footer>
-                </AriaInputGroup>
+                <Cell.Group>
+                  <AriaInputGroup>
+                    <Cell.Container>
+                      <AriaLabel>
+                        <Cell.InputLabel>
+                          {messages.pgettext('openvpn-settings-view', 'Mssfix')}
+                        </Cell.InputLabel>
+                      </AriaLabel>
+                      <AriaInput>
+                        <Cell.AutoSizingTextInput
+                          value={this.props.mssfix ? this.props.mssfix.toString() : ''}
+                          inputMode={'numeric'}
+                          maxLength={4}
+                          placeholder={messages.gettext('Default')}
+                          onSubmitValue={this.onMssfixSubmit}
+                          validateValue={OpenVpnSettings.mssfixIsValid}
+                          submitOnBlur={true}
+                          modifyValue={OpenVpnSettings.removeNonNumericCharacters}
+                        />
+                      </AriaInput>
+                    </Cell.Container>
+                    <Cell.Footer>
+                      <AriaDescription>
+                        <Cell.FooterText>
+                          {sprintf(
+                            // TRANSLATORS: The hint displayed below the Mssfix input field.
+                            // TRANSLATORS: Available placeholders:
+                            // TRANSLATORS: %(openvpn)s - will be replaced with "OpenVPN"
+                            // TRANSLATORS: %(max)d - the maximum possible mssfix value
+                            // TRANSLATORS: %(min)d - the minimum possible mssfix value
+                            messages.pgettext(
+                              'openvpn-settings-view',
+                              'Set %(openvpn)s MSS value. Valid range: %(min)d - %(max)d.',
+                            ),
+                            {
+                              openvpn: strings.openvpn,
+                              min: MIN_MSSFIX_VALUE,
+                              max: MAX_MSSFIX_VALUE,
+                            },
+                          )}
+                        </Cell.FooterText>
+                      </AriaDescription>
+                    </Cell.Footer>
+                  </AriaInputGroup>
+                </Cell.Group>
               </StyledNavigationScrollbars>
             </NavigationContainer>
           </SettingsContainer>
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 5df8da0df3..aeed50afd2 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -67,19 +67,10 @@ const StyledLabel = styled.span({
   margin: '0 22px 18px',
 });
 
-const StyledDeviceList = styled(Cell.CellButtonGroup)({
-  marginBottom: 0,
-  flex: '0 0',
-});
-
 const StyledSpacer = styled.div({
   flex: '1',
 });
 
-const StyledCellContainer = styled(Cell.Container)({
-  marginBottom: '1px',
-});
-
 const StyledDeviceName = styled(Cell.Label)({
   textTransform: 'capitalize',
 });
@@ -175,11 +166,9 @@ interface IDeviceListProps {
 function DeviceList(props: IDeviceListProps) {
   return (
     <StyledSpacer>
-      <StyledDeviceList>
-        <List items={props.devices} getKey={getDeviceKey}>
-          {(device) => <Device device={device} onRemove={props.onRemoveDevice} />}
-        </List>
-      </StyledDeviceList>
+      <List items={props.devices} getKey={getDeviceKey}>
+        {(device) => <Device device={device} onRemove={props.onRemoveDevice} />}
+      </List>
     </StyledSpacer>
   );
 }
@@ -205,7 +194,7 @@ function Device(props: IDeviceProps) {
 
   return (
     <>
-      <StyledCellContainer>
+      <Cell.Container>
         <StyledDeviceName aria-hidden>{props.device.name}</StyledDeviceName>
         <StyledRemoveDeviceButton
           onClick={showConfirmation}
@@ -223,7 +212,7 @@ function Device(props: IDeviceProps) {
             tintHoverColor={colors.white60}
           />
         </StyledRemoveDeviceButton>
-      </StyledCellContainer>
+      </Cell.Container>
       <ModalAlert
         isOpen={confirmationVisible}
         type={ModalAlertType.warning}
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index 285d28b0c4..d0a22c7e87 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -128,138 +128,146 @@ export default class WireguardSettings extends React.Component<IProps, IState> {
                   </HeaderTitle>
                 </SettingsHeader>
 
-                <AriaInputGroup>
-                  <StyledSelectorContainer>
-                    <StyledSelectorForFooter
-                      // TRANSLATORS: The title for the WireGuard port selector.
-                      title={messages.pgettext('wireguard-settings-view', 'Port')}
-                      values={this.wireguardPortItems}
-                      value={this.props.wireguard.port}
-                      onSelect={this.props.setWireguardPort}
-                    />
-                  </StyledSelectorContainer>
-                  <Cell.Footer>
-                    <AriaDescription>
-                      <Cell.FooterText>
-                        {
-                          // TRANSLATORS: The hint displayed below the WireGuard port selector.
-                          messages.pgettext(
-                            'wireguard-settings-view',
-                            'The automatic setting will randomly choose from a wide range of ports.',
-                          )
-                        }
-                      </Cell.FooterText>
-                    </AriaDescription>
-                  </Cell.Footer>
-                </AriaInputGroup>
-
-                <AriaInputGroup>
-                  <Cell.Container>
-                    <AriaLabel>
-                      <Cell.InputLabel>
-                        {
-                          // TRANSLATORS: The label next to the multihop settings toggle.
-                          messages.pgettext('vpn-settings-view', 'Enable multihop')
-                        }
-                      </Cell.InputLabel>
-                    </AriaLabel>
-                    <AriaInput>
-                      <Cell.Switch
-                        ref={this.multihopRef}
-                        isOn={this.props.wireguardMultihop}
-                        onChange={this.setWireguardMultihop}
+                <Cell.Group>
+                  <AriaInputGroup>
+                    <StyledSelectorContainer>
+                      <StyledSelectorForFooter
+                        // TRANSLATORS: The title for the WireGuard port selector.
+                        title={messages.pgettext('wireguard-settings-view', 'Port')}
+                        values={this.wireguardPortItems}
+                        value={this.props.wireguard.port}
+                        onSelect={this.props.setWireguardPort}
                       />
-                    </AriaInput>
-                  </Cell.Container>
-                  <Cell.Footer>
-                    <AriaDescription>
-                      <Cell.FooterText>
-                        {sprintf(
-                          // TRANSLATORS: Description for multihop settings toggle.
-                          // TRANSLATORS: Available placeholders:
-                          // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
-                          messages.pgettext(
-                            'vpn-settings-view',
-                            'Increases anonymity by routing your traffic into one %(wireguard)s server and out another, making it harder to trace.',
-                          ),
-                          { wireguard: strings.wireguard },
-                        )}
-                      </Cell.FooterText>
-                    </AriaDescription>
-                  </Cell.Footer>
-                </AriaInputGroup>
+                    </StyledSelectorContainer>
+                    <Cell.Footer>
+                      <AriaDescription>
+                        <Cell.FooterText>
+                          {
+                            // TRANSLATORS: The hint displayed below the WireGuard port selector.
+                            messages.pgettext(
+                              'wireguard-settings-view',
+                              'The automatic setting will randomly choose from a wide range of ports.',
+                            )
+                          }
+                        </Cell.FooterText>
+                      </AriaDescription>
+                    </Cell.Footer>
+                  </AriaInputGroup>
+                </Cell.Group>
 
-                <AriaInputGroup>
-                  <StyledSelectorContainer>
-                    <StyledSelectorForFooter
-                      // TRANSLATORS: The title for the WireGuard IP version selector.
-                      title={messages.pgettext('wireguard-settings-view', 'IP version')}
-                      values={this.wireguardIpVersionItems}
-                      value={this.props.wireguard.ipVersion}
-                      onSelect={this.props.setWireguardIpVersion}
-                    />
-                  </StyledSelectorContainer>
-                  <Cell.Footer>
-                    <AriaDescription>
-                      <Cell.FooterText>
-                        {sprintf(
-                          // TRANSLATORS: The hint displayed below the WireGuard IP version selector.
-                          // TRANSLATORS: Available placeholders:
-                          // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
-                          messages.pgettext(
-                            'wireguard-settings-view',
-                            'This allows access to %(wireguard)s for devices that only support IPv6.',
-                          ),
-                          { wireguard: strings.wireguard },
-                        )}
-                      </Cell.FooterText>
-                    </AriaDescription>
-                  </Cell.Footer>
-                </AriaInputGroup>
+                <Cell.Group>
+                  <AriaInputGroup>
+                    <Cell.Container>
+                      <AriaLabel>
+                        <Cell.InputLabel>
+                          {
+                            // TRANSLATORS: The label next to the multihop settings toggle.
+                            messages.pgettext('vpn-settings-view', 'Enable multihop')
+                          }
+                        </Cell.InputLabel>
+                      </AriaLabel>
+                      <AriaInput>
+                        <Cell.Switch
+                          ref={this.multihopRef}
+                          isOn={this.props.wireguardMultihop}
+                          onChange={this.setWireguardMultihop}
+                        />
+                      </AriaInput>
+                    </Cell.Container>
+                    <Cell.Footer>
+                      <AriaDescription>
+                        <Cell.FooterText>
+                          {sprintf(
+                            // TRANSLATORS: Description for multihop settings toggle.
+                            // TRANSLATORS: Available placeholders:
+                            // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
+                            messages.pgettext(
+                              'vpn-settings-view',
+                              'Increases anonymity by routing your traffic into one %(wireguard)s server and out another, making it harder to trace.',
+                            ),
+                            { wireguard: strings.wireguard },
+                          )}
+                        </Cell.FooterText>
+                      </AriaDescription>
+                    </Cell.Footer>
+                  </AriaInputGroup>
+                </Cell.Group>
 
-                <AriaInputGroup>
-                  <Cell.Container>
-                    <AriaLabel>
-                      <Cell.InputLabel>
-                        {messages.pgettext('wireguard-settings-view', 'MTU')}
-                      </Cell.InputLabel>
-                    </AriaLabel>
-                    <AriaInput>
-                      <Cell.AutoSizingTextInput
-                        value={this.props.wireguardMtu ? this.props.wireguardMtu.toString() : ''}
-                        inputMode={'numeric'}
-                        maxLength={4}
-                        placeholder={messages.gettext('Default')}
-                        onSubmitValue={this.onWireguardMtuSubmit}
-                        validateValue={WireguardSettings.wireguarMtuIsValid}
-                        submitOnBlur={true}
-                        modifyValue={WireguardSettings.removeNonNumericCharacters}
+                <Cell.Group>
+                  <AriaInputGroup>
+                    <StyledSelectorContainer>
+                      <StyledSelectorForFooter
+                        // TRANSLATORS: The title for the WireGuard IP version selector.
+                        title={messages.pgettext('wireguard-settings-view', 'IP version')}
+                        values={this.wireguardIpVersionItems}
+                        value={this.props.wireguard.ipVersion}
+                        onSelect={this.props.setWireguardIpVersion}
                       />
-                    </AriaInput>
-                  </Cell.Container>
-                  <Cell.Footer>
-                    <AriaDescription>
-                      <Cell.FooterText>
-                        {sprintf(
-                          // TRANSLATORS: The hint displayed below the WireGuard MTU input field.
-                          // TRANSLATORS: Available placeholders:
-                          // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
-                          // TRANSLATORS: %(max)d - the maximum possible wireguard mtu value
-                          // TRANSLATORS: %(min)d - the minimum possible wireguard mtu value
-                          messages.pgettext(
-                            'wireguard-settings-view',
-                            'Set %(wireguard)s MTU value. Valid range: %(min)d - %(max)d.',
-                          ),
-                          {
-                            wireguard: strings.wireguard,
-                            min: MIN_WIREGUARD_MTU_VALUE,
-                            max: MAX_WIREGUARD_MTU_VALUE,
-                          },
-                        )}
-                      </Cell.FooterText>
-                    </AriaDescription>
-                  </Cell.Footer>
-                </AriaInputGroup>
+                    </StyledSelectorContainer>
+                    <Cell.Footer>
+                      <AriaDescription>
+                        <Cell.FooterText>
+                          {sprintf(
+                            // TRANSLATORS: The hint displayed below the WireGuard IP version selector.
+                            // TRANSLATORS: Available placeholders:
+                            // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
+                            messages.pgettext(
+                              'wireguard-settings-view',
+                              'This allows access to %(wireguard)s for devices that only support IPv6.',
+                            ),
+                            { wireguard: strings.wireguard },
+                          )}
+                        </Cell.FooterText>
+                      </AriaDescription>
+                    </Cell.Footer>
+                  </AriaInputGroup>
+                </Cell.Group>
+
+                <Cell.Group>
+                  <AriaInputGroup>
+                    <Cell.Container>
+                      <AriaLabel>
+                        <Cell.InputLabel>
+                          {messages.pgettext('wireguard-settings-view', 'MTU')}
+                        </Cell.InputLabel>
+                      </AriaLabel>
+                      <AriaInput>
+                        <Cell.AutoSizingTextInput
+                          value={this.props.wireguardMtu ? this.props.wireguardMtu.toString() : ''}
+                          inputMode={'numeric'}
+                          maxLength={4}
+                          placeholder={messages.gettext('Default')}
+                          onSubmitValue={this.onWireguardMtuSubmit}
+                          validateValue={WireguardSettings.wireguarMtuIsValid}
+                          submitOnBlur={true}
+                          modifyValue={WireguardSettings.removeNonNumericCharacters}
+                        />
+                      </AriaInput>
+                    </Cell.Container>
+                    <Cell.Footer>
+                      <AriaDescription>
+                        <Cell.FooterText>
+                          {sprintf(
+                            // TRANSLATORS: The hint displayed below the WireGuard MTU input field.
+                            // TRANSLATORS: Available placeholders:
+                            // TRANSLATORS: %(wireguard)s - Will be replaced with the string "WireGuard"
+                            // TRANSLATORS: %(max)d - the maximum possible wireguard mtu value
+                            // TRANSLATORS: %(min)d - the minimum possible wireguard mtu value
+                            messages.pgettext(
+                              'wireguard-settings-view',
+                              'Set %(wireguard)s MTU value. Valid range: %(min)d - %(max)d.',
+                            ),
+                            {
+                              wireguard: strings.wireguard,
+                              min: MIN_WIREGUARD_MTU_VALUE,
+                              max: MAX_WIREGUARD_MTU_VALUE,
+                            },
+                          )}
+                        </Cell.FooterText>
+                      </AriaDescription>
+                    </Cell.Footer>
+                  </AriaInputGroup>
+                </Cell.Group>
               </StyledNavigationScrollbars>
             </NavigationContainer>
           </SettingsContainer>
diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index 070032bd37..e8d1c1c649 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -23,7 +23,6 @@ const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
     display: 'flex',
     minHeight: '44px',
     padding: '0 16px 0 22px',
-    marginBottom: '1px',
     flex: 1,
     alignItems: 'center',
     alignContent: 'center',
diff --git a/gui/src/renderer/components/cell/Footer.tsx b/gui/src/renderer/components/cell/Footer.tsx
index 2cdf8aa8fa..466ef4acca 100644
--- a/gui/src/renderer/components/cell/Footer.tsx
+++ b/gui/src/renderer/components/cell/Footer.tsx
@@ -4,7 +4,7 @@ import { colors } from '../../../config.json';
 import { tinyText } from '../common-styles';
 
 export const Footer = styled.div({
-  padding: '6px 22px 20px',
+  padding: '6px 22px 0px',
 });
 
 export const FooterText = styled.span(tinyText, {
diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx
index 41f57ee52c..1c1779248f 100644
--- a/gui/src/renderer/components/cell/Section.tsx
+++ b/gui/src/renderer/components/cell/Section.tsx
@@ -15,7 +15,6 @@ export const SectionTitle = styled.span(buttonText, {
   alignItems: 'center',
   backgroundColor: colors.blue,
   padding: '0 16px 0 22px',
-  marginBottom: '1px',
 });
 
 export const CellSectionContext = React.createContext<boolean>(false);
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index 5ea1687a1e..ea2abb90ef 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -19,13 +19,8 @@ interface ISelectorProps<T> {
   onSelect: (value: T) => void;
   selectedCellRef?: React.Ref<HTMLButtonElement>;
   className?: string;
-  hasFooter?: boolean;
 }
 
-const Section = styled(Cell.Section)((props: { hasFooter: boolean }) => ({
-  marginBottom: props.hasFooter ? 0 : '20px',
-}));
-
 export default class Selector<T> extends React.Component<ISelectorProps<T>> {
   public render() {
     const items = this.props.values.map((item, i) => {
@@ -52,13 +47,10 @@ export default class Selector<T> extends React.Component<ISelectorProps<T>> {
 
     return (
       <AriaInput>
-        <Section
-          role="listbox"
-          className={this.props.className}
-          hasFooter={this.props.hasFooter ?? false}>
+        <Cell.Section role="listbox" className={this.props.className}>
           {title}
           {items}
-        </Section>
+        </Cell.Section>
       </AriaInput>
     );
   }