fix(ui): remove extra margins from Dockerfile details section EE-4790 (#8213)

app/react/docker/images/ItemView/DockerfileDetails.tsx

@@ -20,64 +20,60 @@ interface Props {
 
 export function DockerfileDetails({ image }: Props) {
   return (
-    <div className="row">
+    <TableContainer>
-      <div className="col-lg-12 col-md-12 col-xs-12">
+      <TableTitle label="Dockerfile details" icon={List} />
-        <TableContainer>
+      <DetailsTable>
-          <TableTitle label="Dockerfile details" icon={List} />
+        <DetailsTable.Row label="CMD">
-          <DetailsTable>
+          <code>{joinCommand(image.Command)}</code>
-            <DetailsTable.Row label="CMD">
+        </DetailsTable.Row>
-              <code>{joinCommand(image.Command)}</code>
-            </DetailsTable.Row>
 
-            {image.Entrypoint && (
+        {image.Entrypoint && (
-              <DetailsTable.Row label="ENTRYPOINT">
+          <DetailsTable.Row label="ENTRYPOINT">
-                <code>{joinCommand(image.Entrypoint)}</code>
+            <code>{joinCommand(image.Entrypoint)}</code>
-              </DetailsTable.Row>
+          </DetailsTable.Row>
-            )}
+        )}
 
-            {image.ExposedPorts.length > 0 && (
+        {image.ExposedPorts.length > 0 && (
-              <DetailsTable.Row label="EXPOSE">
+          <DetailsTable.Row label="EXPOSE">
-                {image.ExposedPorts.map((port, index) => (
+            {image.ExposedPorts.map((port, index) => (
-                  <span className="label label-default space-right" key={index}>
+              <span className="label label-default space-right" key={index}>
-                    {port}
+                {port}
-                  </span>
+              </span>
-                ))}
+            ))}
-              </DetailsTable.Row>
+          </DetailsTable.Row>
-            )}
+        )}
 
-            {image.Volumes.length > 0 && (
+        {image.Volumes.length > 0 && (
-              <DetailsTable.Row label="VOLUME">
+          <DetailsTable.Row label="VOLUME">
-                <div className="flex flex-wrap gap-1">
+            <div className="flex flex-wrap gap-1">
-                  {image.Volumes.map((volume, index) => (
+              {image.Volumes.map((volume, index) => (
-                    <span
+                <span
-                      key={index}
+                  key={index}
-                      className="label label-default space-right"
+                  className="label label-default space-right"
-                      ng-repeat="volume in image.Volumes"
+                  ng-repeat="volume in image.Volumes"
-                    >
+                >
-                      {volume}
+                  {volume}
-                    </span>
+                </span>
-                  ))}
+              ))}
-                </div>
+            </div>
-              </DetailsTable.Row>
+          </DetailsTable.Row>
-            )}
+        )}
 
-            {image.Env.length > 0 && (
+        {image.Env.length > 0 && (
-              <DetailsTable.Row label="ENV">
+          <DetailsTable.Row label="ENV">
-                <table className="table table-bordered table-condensed">
+            <table className="table table-bordered table-condensed">
-                  <tbody>
+              <tbody>
-                    {image.Env.map((variable) => (
+                {image.Env.map((variable) => (
-                      <tr key={variable}>
+                  <tr key={variable}>
-                        <td>{getPairKey(variable, '=')}</td>
+                    <td>{getPairKey(variable, '=')}</td>
-                        <td>{getPairValue(variable, '=')}</td>
+                    <td>{getPairValue(variable, '=')}</td>
-                      </tr>
+                  </tr>
-                    ))}
+                ))}
-                  </tbody>
+              </tbody>
-                </table>
+            </table>
-              </DetailsTable.Row>
+          </DetailsTable.Row>
-            )}
+        )}
-          </DetailsTable>
+      </DetailsTable>
-        </TableContainer>
+    </TableContainer>
-      </div>
-    </div>
   );
 }