fix focus & overflow

src/lib/components/cardGrid.svelte

@@ -2,10 +2,11 @@
     import { Card } from './';
 
     export let danger = false;
+    export let hideOverflow = false;
 </script>
 
 <Card {danger}>
-    <div class="common-section grid-1-2">
+    <div class="common-section grid-1-2" class:hideOverflow>
         <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
             <slot />
         </div>
@@ -21,7 +22,7 @@
 </Card>
 
 <style lang="scss">
-    .grid-1-2 > * {
+    .hideOverflow > * {
         width: 100%;
         overflow: hidden;
     }

src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte

@@ -257,7 +257,7 @@
         </Form>
 
         <Form onSubmit={updatePermissions}>
-            <CardGrid>
+            <CardGrid hideOverflow>
                 <Heading tag="h6" size="7" id="permissions">Permissions</Heading>
                 <p class="text">
                     Choose who can access your buckets and files. For more information, check out
@@ -405,7 +405,7 @@
         <UpdateMaxFileSize />
 
         <Form onSubmit={updateAllowedExtensions}>
-            <CardGrid>
+            <CardGrid hideOverflow>
                 <Heading tag="h6" size="7" id="extensions">File Extensions</Heading>
                 <p class="text">
                     Allowed file extensions. A maximum of 100 file extensions can be added. Leave