From 3963cf2025cdb47efc7418980265ea8a724473af Mon Sep 17 00:00:00 2001
From: garethgeorge <garethgeorge97@gmail.com>
Date: Sat, 2 Dec 2023 14:44:53 -0800
Subject: [PATCH] fix: UI layout adjustments

---
 webui/src/views/AddPlanModal.tsx | 10 +++--
 webui/src/views/AddRepoModal.tsx | 68 ++++++++++++++++++++------------
 2 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/webui/src/views/AddPlanModal.tsx b/webui/src/views/AddPlanModal.tsx
index 511840b6..9f065746 100644
--- a/webui/src/views/AddPlanModal.tsx
+++ b/webui/src/views/AddPlanModal.tsx
@@ -272,7 +272,8 @@ export const AddPlanModal = ({
               <>
                 {fields.map((field, index) => (
                   <Form.Item
-                    label={index === 0 ? "Excludes" : ""}
+                    label={index === 0 ? "Excludes" : " "}
+                    colon={index === 0}
                     required={false}
                     key={field.key}
                   >
@@ -299,7 +300,10 @@ export const AddPlanModal = ({
                     />
                   </Form.Item>
                 ))}
-                <Form.Item label={fields.length === 0 ? "Excludes" : ""}>
+                <Form.Item
+                  label={fields.length === 0 ? "Excludes" : " "}
+                  colon={fields.length === 0}
+                >
                   <Button
                     type="dashed"
                     onClick={() => add()}
@@ -477,10 +481,10 @@ const RetentionPolicyView = ({ policy }: { policy?: RetentionPolicy }) => {
             setPolicyType(e.target.value);
           }}
         >
+          <Radio.Button value={PolicyType.CountBased}>By Count</Radio.Button>
           <Radio.Button value={PolicyType.TimeBased}>
             By Time Period
           </Radio.Button>
-          <Radio.Button value={PolicyType.CountBased}>By Count</Radio.Button>
         </Radio.Group>
       </Form.Item>
       {elem}
diff --git a/webui/src/views/AddRepoModal.tsx b/webui/src/views/AddRepoModal.tsx
index cff60546..8cf1a7ed 100644
--- a/webui/src/views/AddRepoModal.tsx
+++ b/webui/src/views/AddRepoModal.tsx
@@ -6,6 +6,8 @@ import {
   AutoComplete,
   Tooltip,
   Button,
+  Row,
+  Col,
 } from "antd";
 import React, { useState } from "react";
 import { useShowModal } from "../components/ModalManager";
@@ -137,6 +139,7 @@ export const AddRepoModal = ({
         open={true}
         onCancel={handleCancel}
         title={template ? "Edit Restic Repository" : "Add Restic Repository"}
+        width="40vw"
         footer={[
           <Button loading={confirmLoading} key="back" onClick={handleCancel}>
             Cancel
@@ -162,7 +165,12 @@ export const AddRepoModal = ({
           </Button>,
         ]}
       >
-        <Form layout={"vertical"} autoComplete="off" form={form}>
+        <Form
+          autoComplete="off"
+          form={form}
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 16 }}
+        >
           {/* Repo.id */}
           <Form.Item<Repo>
             hasFeedback
@@ -220,7 +228,7 @@ export const AddRepoModal = ({
             <Form.Item<Repo>
               hasFeedback
               name="uri"
-              label="Repository URI (e.g. ./local-path or s3://bucket-name/path)"
+              label="Repository URI"
               initialValue={template ? template.uri : ""}
               validateTrigger={["onChange", "onBlur"]}
               rules={[
@@ -235,12 +243,28 @@ export const AddRepoModal = ({
           </Tooltip>
 
           {/* Repo.password */}
-          <Form.Item<Repo>
-            hasFeedback
-            name="password"
-            label={
-              <>
-                Password{" "}
+          <Form.Item<Repo> hasFeedback name="password" label={<>Password </>}>
+            <Row>
+              <Col span={16}>
+                <Form.Item
+                  name="password"
+                  initialValue={template && template.password}
+                  validateTrigger={["onChange", "onBlur"]}
+                  rules={[
+                    {
+                      required: true,
+                      message: "Please input repo name",
+                    },
+                  ]}
+                >
+                  <Input disabled={!!template} />
+                </Form.Item>
+              </Col>
+              <Col
+                span={7}
+                offset={1}
+                style={{ display: "flex", justifyContent: "left" }}
+              >
                 <Button
                   type="text"
                   onClick={() => {
@@ -250,20 +274,10 @@ export const AddRepoModal = ({
                     });
                   }}
                 >
-                  [Create Crypto Random]
+                  [Generate]
                 </Button>
-              </>
-            }
-            initialValue={template && template.password}
-            validateTrigger={["onChange", "onBlur"]}
-            rules={[
-              {
-                required: true,
-                message: "Please input repo name",
-              },
-            ]}
-          >
-            <Input disabled={!!template} />
+              </Col>
+            </Row>
           </Form.Item>
 
           {/* Repo.env */}
@@ -283,7 +297,8 @@ export const AddRepoModal = ({
               <>
                 {fields.map((field, index) => (
                   <Form.Item
-                    label={index === 0 ? "Environment Variables" : ""}
+                    label={index === 0 ? "Environment Variables" : " "}
+                    colon={index === 0}
                     required={false}
                     key={field.key}
                   >
@@ -316,7 +331,8 @@ export const AddRepoModal = ({
                   </Form.Item>
                 ))}
                 <Form.Item
-                  label={fields.length === 0 ? "Environment Variables" : ""}
+                  label={fields.length === 0 ? "Environment Variables" : " "}
+                  colon={fields.length === 0}
                 >
                   <Button
                     type="dashed"
@@ -338,7 +354,8 @@ export const AddRepoModal = ({
               <>
                 {fields.map((field, index) => (
                   <Form.Item
-                    label={index === 0 ? "(Advanced) Flag Overrides" : ""}
+                    label={index === 0 ? "Flag Overrides" : " "}
+                    colon={index === 0}
                     required={false}
                     key={field.key}
                   >
@@ -367,7 +384,8 @@ export const AddRepoModal = ({
                   </Form.Item>
                 ))}
                 <Form.Item
-                  label={fields.length === 0 ? "(Advanced) Flag Overrides" : ""}
+                  label={fields.length === 0 ? "Flag Overrides" : " "}
+                  colon={fields.length === 0}
                 >
                   <Button
                     type="dashed"