Fix dhcp interfaces markup

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,10 +91,10 @@ const Interfaces = () => {
                             </option>
                             {renderInterfaces(interfaces)}
                         </Field>
+                    </div>
                     {interfaceValue
                     && renderInterfaceValues(interfaceValue)}
                 </div>
-                </div>
             </>;
 };
 

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;
+    }
 }