NEOS-1678: minor subset page styling updates (#3051)

nucleuscloud · Dec 14, 2024 · 8f1e3f4 · 8f1e3f4
1 parent ca4d3ee
commit 8f1e3f4
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 38 deletions.
diff --git a/frontend/apps/web/components/jobs/subsets/EditItem.tsx b/frontend/apps/web/components/jobs/subsets/EditItem.tsx
@@ -241,7 +241,7 @@ export default function EditItem(props: Props): ReactElement {
                   <TooltipTrigger asChild>
                     <Button
                       type="button"
-                      variant="secondary"
+                      variant="outline"
                       disabled={!item?.where}
                       onClick={() => onGetRowCount()}
                     >
@@ -277,7 +277,7 @@ export default function EditItem(props: Props): ReactElement {
                 <TooltipTrigger asChild>
                   <Button
                     type="button"
-                    variant="secondary"
+                    variant="outline"
                     disabled={!item}
                     onClick={() => onValidate()}
                   >
@@ -293,37 +293,6 @@ export default function EditItem(props: Props): ReactElement {
               </Tooltip>
             </TooltipProvider>
           )}
-          <Button
-            type="button"
-            variant="secondary"
-            disabled={!item}
-            onClick={() => onCancelClick()}
-          >
-            <ButtonText text="Cancel" />
-          </Button>
-          <TooltipProvider>
-            <Tooltip delayDuration={200}>
-              <TooltipTrigger asChild>
-                <Button
-                  type="button"
-                  disabled={!item}
-                  onClick={() => {
-                    const editor = editorRef.current;
-                    editor?.setValue('');
-                    onSaveClick();
-                  }}
-                >
-                  <ButtonText text="Apply" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>
-                  Applies changes to table only, click Save below to fully
-                  submit changes
-                </p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
         </div>
       </div>
       <div className="flex flex-col items-center justify-between rounded-lg border dark:border-gray-700 p-3 shadow-sm">
@@ -341,6 +310,39 @@ export default function EditItem(props: Props): ReactElement {
         validateResp={validateResp}
         rowCountError={rowCountError}
       />
+      <div className="flex justify-between gap-4">
+        <Button
+          type="button"
+          variant="secondary"
+          disabled={!item}
+          onClick={() => onCancelClick()}
+        >
+          <ButtonText text="Cancel" />
+        </Button>
+        <TooltipProvider>
+          <Tooltip delayDuration={200}>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                disabled={!item}
+                onClick={() => {
+                  const editor = editorRef.current;
+                  editor?.setValue('');
+                  onSaveClick();
+                }}
+              >
+                <ButtonText text="Apply" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                Applies changes to table only, click Save below to fully submit
+                changes
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
     </div>
   );
 }

diff --git a/frontend/apps/web/components/jobs/subsets/ValidateQueryBadge.tsx b/frontend/apps/web/components/jobs/subsets/ValidateQueryBadge.tsx
@@ -15,7 +15,7 @@ export default function ValidateQueryBadge(props: Props): ReactElement | null {
   return (
     <Badge
       variant={resp.isValid ? 'success' : 'destructive'}
-      className="cursor-default px-4 py-2"
+      className="cursor-default px-4 py-2 h-6"
     >
       {text}
     </Badge>

diff --git a/frontend/apps/web/components/jobs/subsets/subset-table/column.tsx b/frontend/apps/web/components/jobs/subsets/subset-table/column.tsx
@@ -85,9 +85,9 @@ export function getColumns(props: GetColumnsProps): ColumnDef<TableRow>[] {
                     </div>
                   </TooltipTrigger>
                   <TooltipContent className="max-w-xs px-2 text-center mx-auto">
-                    This is a Root table that only has has foreign key
-                    references to children tables. Subsetting this table will
-                    subset all of it&apos;s children tables.
+                    This is a Root table that only has foreign key references to
+                    children tables. Subsetting this table will subset all of
+                    it&apos;s children tables.
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
@@ -114,8 +114,8 @@ export function getColumns(props: GetColumnsProps): ColumnDef<TableRow>[] {
           </div>
         );
       },
+      size: 250,
     },
-
     {
       accessorKey: 'edit',
       header: ({ column }) => (