fix: wrong layout if button text is too long in modals

stonith404 · Jul 22, 2023 · f4c88ae · f4c88ae
1 parent 231a2e9
commit f4c88ae
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 44 deletions.
diff --git a/frontend/src/components/account/showEnableTotpModal.tsx b/frontend/src/components/account/showEnableTotpModal.tsx
@@ -1,8 +1,7 @@
 import {
   Button,
   Center,
-  Col,
-  Grid,
+  Group,
   Image,
   Stack,
   Text,
@@ -114,21 +113,23 @@ const CreateEnableTotpModal = ({
                 .catch(toast.axiosError);
             })}
           >
-            <Grid align="flex-end">
-              <Col xs={9}>
-                <TextInput
-                  variant="filled"
-                  label={t("account.modal.totp.code")}
-                  placeholder="******"
-                  {...form.getInputProps("code")}
-                />
-              </Col>
-              <Col xs={3}>
-                <Button variant="outline" type="submit">
-                  <FormattedMessage id="account.modal.totp.verify" />
-                </Button>
-              </Col>
-            </Grid>
+            <Group align="end">
+              <TextInput
+                style={{ flex: "1" }}
+                variant="filled"
+                label={t("account.modal.totp.code")}
+                placeholder="******"
+                {...form.getInputProps("code")}
+              />
+
+              <Button
+                style={{ flex: "0 0 auto" }}
+                variant="outline"
+                type="submit"
+              >
+                <FormattedMessage id="account.modal.totp.verify" />
+              </Button>
+            </Group>
           </form>
         </Stack>
       </Center>

diff --git a/frontend/src/components/upload/modals/showCreateUploadModal.tsx b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
@@ -5,6 +5,7 @@ import {
   Checkbox,
   Col,
   Grid,
+  Group,
   MultiSelect,
   NumberInput,
   PasswordInput,
@@ -135,31 +136,29 @@ const CreateUploadModalBody = ({
         })}
       >
         <Stack align="stretch">
-          <Grid align={form.errors.link ? "center" : "flex-end"}>
-            <Col xs={9}>
-              <TextInput
-                variant="filled"
-                label="Link"
-                placeholder="myAwesomeShare"
-                {...form.getInputProps("link")}
-              />
-            </Col>
-            <Col xs={3}>
-              <Button
-                variant="outline"
-                onClick={() =>
-                  form.setFieldValue(
-                    "link",
-                    Buffer.from(Math.random().toString(), "utf8")
-                      .toString("base64")
-                      .substr(10, 7)
-                  )
-                }
-              >
-                <FormattedMessage id="common.button.generate" />
-              </Button>
-            </Col>
-          </Grid>
+          <Group align="end">
+            <TextInput
+              style={{ flex: "1" }}
+              variant="filled"
+              label="Link"
+              placeholder="myAwesomeShare"
+              {...form.getInputProps("link")}
+            />
+            <Button
+              style={{ flex: "0 0 auto" }}
+              variant="outline"
+              onClick={() =>
+                form.setFieldValue(
+                  "link",
+                  Buffer.from(Math.random().toString(), "utf8")
+                    .toString("base64")
+                    .substr(10, 7)
+                )
+              }
+            >
+              <FormattedMessage id="common.button.generate" />
+            </Button>
+          </Group>
 
           <Text
             italic
@@ -173,6 +172,17 @@ const CreateUploadModalBody = ({
           {!options.isReverseShare && (
             <>
               <Grid align={form.errors.link ? "center" : "flex-end"}>
+                <Col xs={6}>
+                  <NumberInput
+                    min={1}
+                    max={99999}
+                    precision={0}
+                    variant="filled"
+                    label={t("upload.modal.expires.label")}
+                    disabled={form.values.never_expires}
+                    {...form.getInputProps("expiration_num")}
+                  />
+                </Col>
                 <Col xs={6}>
                   <Select
                     disabled={form.values.never_expires}

diff --git a/frontend/src/i18n/translations/en-US.ts b/frontend/src/i18n/translations/en-US.ts
@@ -260,8 +260,6 @@ export default {
   "upload.modal.expires.never-long": "Never Expires",
 
   "upload.modal.link.label": "Link",
-  "upload.modal.link.placeholder": "myAwesomeShare",
-
   "upload.modal.expires.label": "Expiration",
   "upload.modal.expires.minute-singular": "Minute",
   "upload.modal.expires.minute-plural": "Minutes",