Tweaks for small screens and forms (#1138)

* fix: bump dialog z-index

* fix: tweak page header layout for small screens

* fix: disable save buttons during loading

* fix: disable save buttons after success

* fix: disable delete buttons during loading

Author: annavik

ui/src/components/form/delete-form/delete-form.tsx

@@ -38,7 +38,7 @@ export const DeleteForm = ({
             <span>{translate(STRING.CANCEL)}</span>
           </Button>
           <Button
-            disabled={isSuccess}
+            disabled={isLoading || isSuccess}
             onClick={onSubmit}
             size="small"
             variant="destructive"

ui/src/design-system/components/button/save-button.tsx

@@ -11,7 +11,13 @@ export const SaveButton = ({
   isSuccess?: boolean
   onClick?: () => void
 }) => (
-  <Button onClick={onClick} size="small" type="submit" variant="success">
+  <Button
+    disabled={isLoading || isSuccess}
+    onClick={onClick}
+    size="small"
+    type="submit"
+    variant="success"
+  >
     <span>{isSuccess ? translate(STRING.SAVED) : translate(STRING.SAVE)}</span>
     {isSuccess ? (
       <CheckIcon className="w-4 h-4" />

ui/src/design-system/components/dialog/dialog.module.scss

@@ -9,7 +9,7 @@ $dialog-padding-medium: 32px;
   background-color: rgba(0, 0, 0, 0.2);
   position: fixed;
   inset: 0;
-  z-index: 3;
+  z-index: 50;
 }
 
 .loadingWrapper {
@@ -36,7 +36,7 @@ $dialog-padding-medium: 32px;
   max-width: calc(100% - (2 * $dialog-padding-large));
   height: calc(100vh - (2 * $dialog-padding-large));
   height: calc(100dvh - (2 * $dialog-padding-large));
-  z-index: 3;
+  z-index: 50;
 
   &.compact {
     width: 384px;

ui/src/design-system/components/page-header/page-header.module.scss

@@ -34,6 +34,17 @@
 }
 
 @media only screen and (max-width: $small-screen-breakpoint) {
+  .wrapper {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .actions {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
   .details {
     flex-direction: column;
     align-items: flex-start;

ui/src/design-system/components/page-header/page-header.tsx

@@ -49,6 +49,8 @@ export const PageHeader = ({
         </div>
       </div>
     </div>
-    <div className={classNames(styles.row, 'no-print')}>{children}</div>
+    <div className={classNames(styles.row, styles.actions, 'no-print')}>
+      {children}
+    </div>
   </div>
 )

ui/src/design-system/components/sort-control.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { ArrowUpDownIcon } from 'lucide-react'
 import { buttonVariants, Select } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
@@ -24,7 +25,10 @@ export const SortControl = ({ columns, setSort, sort }: SortControlProps) => {
     >
       <BasicTooltip asChild content={translate(STRING.SORT_BY)}>
         <Select.Trigger
-          className={buttonVariants({ size: 'small', variant: 'outline' })}
+          className={classNames(
+            buttonVariants({ size: 'small', variant: 'outline' }),
+            'w-auto'
+          )}
         >
           <ArrowUpDownIcon className="w-4 h-4" />
           <span>{column ? column.name : translate(STRING.SORT_BY)}</span>