From fc4a5576109419e32a82b377647a96caf0c6a46b Mon Sep 17 00:00:00 2001
From: ArtemBaskal <a.baskal@adguard.com>
Date: Tue, 6 Oct 2020 20:52:44 +0300
Subject: [PATCH] Fix dhcp interfaces markup

---
 client/src/components/Settings/Dhcp/Interfaces.js |  8 ++++----
 client/src/components/Settings/Dhcp/index.css     | 13 +++++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Settings/Dhcp/Interfaces.js b/client/src/components/Settings/Dhcp/Interfaces.js
index e1480d25..dcf5e3fa 100644
--- a/client/src/components/Settings/Dhcp/Interfaces.js
+++ b/client/src/components/Settings/Dhcp/Interfaces.js
@@ -46,7 +46,7 @@ const renderInterfaceValues = ({
     gateway_ip,
     hardware_address,
     ip_addresses,
-}) => <div className='d-flex align-items-end col-md'>
+}) => <div className='d-flex align-items-end dhcp__interfaces-info'>
     <ul className="list-unstyled m-0">
         {getInterfaceValues({
             gateway_ip,
@@ -77,7 +77,7 @@ const Interfaces = () => {
     return !processingInterfaces
             && interfaces
             && <>
-                <div className="row align-items-center pb-2">
+                <div className="row dhcp__interfaces">
                     <div className="col col__dhcp">
                         <Field
                                 name="interface_name"
@@ -91,9 +91,9 @@ const Interfaces = () => {
                             </option>
                             {renderInterfaces(interfaces)}
                         </Field>
-                        {interfaceValue
-                        && renderInterfaceValues(interfaceValue)}
                     </div>
+                    {interfaceValue
+                    && renderInterfaceValues(interfaceValue)}
                 </div>
             </>;
 };
diff --git a/client/src/components/Settings/Dhcp/index.css b/client/src/components/Settings/Dhcp/index.css
index 5395f85d..7cf92aee 100644
--- a/client/src/components/Settings/Dhcp/index.css
+++ b/client/src/components/Settings/Dhcp/index.css
@@ -12,6 +12,10 @@
     max-width: 50%;
 }
 
+.dhcp__interfaces {
+    padding-bottom: 1rem;
+}
+
 @media (max-width: 991.98px) {
     .dhcp-form__button {
         margin: 0.5rem 0;
@@ -28,4 +32,13 @@
         flex: 0 0 100%;
         max-width: 100%;
     }
+
+    .dhcp__interfaces {
+        flex-direction: column;
+        padding-bottom: 0.5rem;
+    }
+
+    .dhcp__interfaces-info {
+        padding-left: 1.5rem;
+    }
 }