From e5fc4117ecec41ef96851a58b191f3611cdc033f Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Sat, 2 Apr 2022 23:36:05 -0700
Subject: [PATCH] config justify

---
 .../src/components/deployment/tabs/Tabs.tsx   |  1 +
 .../components/deployment/tabs/config/Env.tsx | 24 +++++++++++--------
 .../deployment/tabs/config/Ports.tsx          | 18 +++++++-------
 .../deployment/tabs/config/Volumes.tsx        | 18 +++++++-------
 frontend/src/index.css                        |  1 +
 5 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/deployment/tabs/Tabs.tsx b/frontend/src/components/deployment/tabs/Tabs.tsx
index 2798b4ab7..0895dbeb8 100644
--- a/frontend/src/components/deployment/tabs/Tabs.tsx
+++ b/frontend/src/components/deployment/tabs/Tabs.tsx
@@ -57,6 +57,7 @@ const DeploymentTabs: Component<{}> = (p) => {
       <ConfigProvider deployment={deployment()!}>
         <Tabs
           containerClass="card tabs shadow"
+          containerStyle={{ gap: "0.5rem" }}
           tabs={[
             {
               title: "config",
diff --git a/frontend/src/components/deployment/tabs/config/Env.tsx b/frontend/src/components/deployment/tabs/config/Env.tsx
index ba207fce4..c949c4e9a 100644
--- a/frontend/src/components/deployment/tabs/config/Env.tsx
+++ b/frontend/src/components/deployment/tabs/config/Env.tsx
@@ -20,20 +20,24 @@ const Env: Component<{}> = (p) => {
   };
   return (
     <Grid class="config-item shadow">
-      <Flex alignItems="center">
+      <Flex alignItems="center" justifyContent="space-between">
         <h1>environment</h1>
-        <Show
-          when={!deployment.environment || deployment.environment.length === 0}
-        >
-          <div>none</div>
-        </Show>
-        <button class="green" onClick={onAdd}>
-          <Icon type="plus" />
-        </button>
+        <Flex alignItems="center">
+          <Show
+            when={
+              !deployment.environment || deployment.environment.length === 0
+            }
+          >
+            <div>none</div>
+          </Show>
+          <button class="green" onClick={onAdd}>
+            <Icon type="plus" />
+          </button>
+        </Flex>
       </Flex>
       <For each={deployment.environment}>
         {(_, index) => (
-          <Flex justifyContent="center">
+          <Flex justifyContent="space-between" alignItems="center">
             <Input
               placeholder="variable"
               value={deployment.environment![index()].variable}
diff --git a/frontend/src/components/deployment/tabs/config/Ports.tsx b/frontend/src/components/deployment/tabs/config/Ports.tsx
index 2275c5769..967ae3bdd 100644
--- a/frontend/src/components/deployment/tabs/config/Ports.tsx
+++ b/frontend/src/components/deployment/tabs/config/Ports.tsx
@@ -18,18 +18,20 @@ const Ports: Component<{}> = (p) => {
   };
   return (
     <Grid class="config-item shadow">
-      <Flex alignItems="center">
+      <Flex alignItems="center" justifyContent="space-between">
         <h1>ports</h1>
-        <Show when={!deployment.ports || deployment.ports.length === 0}>
-          <div>none</div>
-        </Show>
-        <button class="green" onClick={onAdd}>
-          <Icon type="plus" />
-        </button>
+        <Flex alignItems="center">
+          <Show when={!deployment.ports || deployment.ports.length === 0}>
+            <div>none</div>
+          </Show>
+          <button class="green" onClick={onAdd}>
+            <Icon type="plus" />
+          </button>
+        </Flex>
       </Flex>
       <For each={deployment.ports}>
         {({ local, container }, index) => (
-          <Flex justifyContent="center">
+          <Flex justifyContent="space-between" alignItems="center">
             <Input
               placeholder="system"
               value={local}
diff --git a/frontend/src/components/deployment/tabs/config/Volumes.tsx b/frontend/src/components/deployment/tabs/config/Volumes.tsx
index 376423f0e..0862448fd 100644
--- a/frontend/src/components/deployment/tabs/config/Volumes.tsx
+++ b/frontend/src/components/deployment/tabs/config/Volumes.tsx
@@ -18,18 +18,20 @@ const Volumes: Component<{}> = (p) => {
   };
   return (
     <Grid class="config-item shadow">
-      <Flex alignItems="center">
+      <Flex justifyContent="space-between" alignItems="center">
         <h1>volumes</h1>
-        <Show when={!deployment.volumes || deployment.volumes.length === 0}>
-          <div>none</div>
-        </Show>
-        <button class="green" onClick={onAdd}>
-          <Icon type="plus" />
-        </button>
+        <Flex alignItems="center">
+          <Show when={!deployment.volumes || deployment.volumes.length === 0}>
+            <div>none</div>
+          </Show>
+          <button class="green" onClick={onAdd}>
+            <Icon type="plus" />
+          </button>
+        </Flex>
       </Flex>
       <For each={deployment.volumes}>
         {({ local, container }, index) => (
-          <Flex justifyContent="center">
+          <Flex justifyContent="space-between" alignItems="center">
             <Input
               placeholder="system"
               value={local}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index da2abfdef..1583a7842 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -170,6 +170,7 @@ h1 {
 
 .scroller::-webkit-scrollbar {
 	width: 8px;
+  height: 8px;
 	background-color: transparent;
 }