fix (API): table not scrollable (#1047)

* fix: table not scrollable

* refactor: button container

Author: paanSinghCoder

sdks/js/packages/core/react/components/organization/api-keys/columns.tsx

@@ -68,6 +68,7 @@ function ServiceAccountDeleteAction({ id }: { id: string }) {
     <Button
       variant="text"
       size="small"
+      color="danger"
       data-test-id="frontier-sdk-delete-service-account-btn"
       onClick={onDeleteClick}
     >

sdks/js/packages/core/react/components/organization/api-keys/service-user/add-token.tsx

@@ -61,23 +61,23 @@ export default function AddServiceUserToken({
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Flex gap={3}>
-        <Flex className={styles.addKeyInputWrapper} direction="column">
+        <Flex className={styles.addKeyInputWrapper} gap={3}>
           <InputField
             {...register('title')}
             size="large"
             placeholder="Provide service key name"
             error={errors.title && String(errors.title?.message)}
           />
+          <Button
+            data-test-id="frontier-sdk-api-keys-new-token-btn"
+            type="submit"
+            loading={isSubmitting}
+            disabled={isSubmitting}
+            loaderText="Generating..."
+          >
+            Generate new key
+          </Button>
         </Flex>
-        <Button
-          data-test-id="frontier-sdk-api-keys-new-token-btn"
-          type="submit"
-          loading={isSubmitting}
-          disabled={isSubmitting}
-          loaderText="Generating..."
-        >
-          Generate new key
-        </Button>
       </Flex>
     </form>
   );

sdks/js/packages/core/react/components/organization/api-keys/service-user/styles.module.css

@@ -20,7 +20,6 @@
 .serviceKeyItem {
   padding: var(--rs-space-5);
   border: 1px solid var(--rs-color-border-base-primary);
-  border-radius: var();
 }
 
 .serviceKeyItem + .serviceKeyItem {
@@ -47,6 +46,7 @@
 .addKeyInputWrapper {
   width: 100%;
   position: relative;
+  align-items: start;
 }
 
 .addKeyInputError {
@@ -77,17 +77,17 @@
 }
 
 .manageProjectDialogWrapper {
-  height: calc(100% - var(--rs-space-9) - var(--rs-space-9));
-  overflow: hidden;
+  max-height: calc(80vh - var(--rs-space-17));
+  overflow: auto;
 }
 
 .manageProjectDialogContent {
-  height: 70%;
+  height: 80vh;
   width: 70%;
   padding: 0;
 }
 
 .tableRoot {
   height: 100%;
-  overflow-y: auto;
+  overflow: auto;
 }