From b2bc4b92d635d3adbacebb60948755d025285cd7 Mon Sep 17 00:00:00 2001
From: andres-portainer <91705312+andres-portainer@users.noreply.github.com>
Date: Wed, 21 Dec 2022 19:09:40 -0300
Subject: [PATCH] fix(ui): remove extra margins from Dockerfile details section
 EE-4790 (#8213)

---
 .../images/ItemView/DockerfileDetails.tsx     | 106 +++++++++---------
 1 file changed, 51 insertions(+), 55 deletions(-)

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