Merge branch 'fix/create-clone-ui' into 'master'

fix(ui): fix CreateClone form layout and deletion protection label

Closes #703

See merge request postgres-ai/database-lab!1134

Author: Sarumyan

ui/packages/shared/pages/Clone/index.tsx

@@ -651,7 +651,7 @@ export const Clone = observer((props: Props) => {
           </p>
           <div style={{ marginTop: '8px', marginBottom: '16px' }}>
             <Select
-              label="Deletion protection"
+              label={"Deletion\u00a0protection"}
               items={
                 clone.protected && clone.protectedTillDate
                   ? [
@@ -663,7 +663,7 @@ export const Clone = observer((props: Props) => {
               value={getCurrentProtectionValue()}
               onChange={handleProtectionChange}
               disabled={isDisabledControls}
-              style={{ minWidth: 100 }}
+              style={{ minWidth: 200 }}
             />
             {isUpdatingClone && <Spinner size="sm" className={classes.spinner} />}
           </div>

ui/packages/shared/pages/CreateClone/index.tsx

@@ -393,6 +393,7 @@ export const CreateClone = observer((props: Props) => {
             <h2 className={styles.title}>Clone protection</h2>
 
             <Select
+              fullWidth
               label="Deletion protection"
               items={(() => {
                 const maxDurationMinutes = stores.main.instance?.state?.cloning?.protectionMaxDurationMinutes ?? 0
@@ -423,7 +424,6 @@ export const CreateClone = observer((props: Props) => {
                 formik.setFieldValue('protectionDurationMinutes', e.target.value)
               }
               disabled={isCreatingClone}
-              style={{ minWidth: 100 }}
             />
 
             <p className={styles.remark}>

ui/packages/shared/pages/CreateClone/styles.module.scss

@@ -16,6 +16,7 @@
 
 .form {
   flex: 1 1 0;
+  min-width: 0;
 }
 
 .snippetContainer {