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

frontend/src/components/account/showEnableTotpModal.tsx

@@ -1,8 +1,7 @@
 import {
   Button,
   Center,
-  Col,
+  Group,
-  Grid,
   Image,
   Stack,
   Text,
@@ -114,21 +113,23 @@ const CreateEnableTotpModal = ({
                 .catch(toast.axiosError);
             })}
           >
-            <Grid align="flex-end">
+            <Group align="end">
-              <Col xs={9}>
               <TextInput
+                style={{ flex: "1" }}
                 variant="filled"
                 label={t("account.modal.totp.code")}
                 placeholder="******"
                 {...form.getInputProps("code")}
               />
-              </Col>
+
-              <Col xs={3}>
+              <Button
-                <Button variant="outline" type="submit">
+                style={{ flex: "0 0 auto" }}
+                variant="outline"
+                type="submit"
+              >
                 <FormattedMessage id="account.modal.totp.verify" />
               </Button>
-              </Col>
+            </Group>
-            </Grid>
           </form>
         </Stack>
       </Center>

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -5,6 +5,7 @@ import {
   Checkbox,
   Col,
   Grid,
+  Group,
   MultiSelect,
   NumberInput,
   PasswordInput,
@@ -135,17 +136,16 @@ const CreateUploadModalBody = ({
         })}
       >
         <Stack align="stretch">
-          <Grid align={form.errors.link ? "center" : "flex-end"}>
+          <Group align="end">
-            <Col xs={9}>
             <TextInput
+              style={{ flex: "1" }}
               variant="filled"
               label="Link"
               placeholder="myAwesomeShare"
               {...form.getInputProps("link")}
             />
-            </Col>
-            <Col xs={3}>
             <Button
+              style={{ flex: "0 0 auto" }}
               variant="outline"
               onClick={() =>
                 form.setFieldValue(
@@ -158,8 +158,7 @@ const CreateUploadModalBody = ({
             >
               <FormattedMessage id="common.button.generate" />
             </Button>
-            </Col>
+          </Group>
-          </Grid>
 
           <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}

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",