feat(sqllab): improve SaveDatasetModal design with proper theme spacing (#34658)

Co-authored-by: Claude <noreply@anthropic.com>

superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx

@@ -67,7 +67,7 @@ describe('SaveDatasetModal', () => {
     render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
 
     const saveRadioBtn = screen.getByRole('radio', {
-      name: /save as new unimportant/i,
+      name: /save as new/i,
     });
 
     const fieldLabel = screen.getByText(/save as new/i);

superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx

@@ -104,33 +104,47 @@ interface SaveDatasetModalProps {
 
 const Styles = styled.div`
   ${({ theme }) => `
-  .sdm-body {
-    margin: 0 ${theme.sizeUnit * 2}px;
-  }
-  .sdm-input {
-    margin-left: ${theme.sizeUnit * 10}px;
-    width: 401px;
-  }
-  .sdm-autocomplete {
-    width: 401px;
-    align-self: center;
-    margin-left: ${theme.sizeUnit}px;
-  }
-  .sdm-radio {
-    height: 30px;
-    margin: 10px 0px;
-    line-height: 30px;
-  }
-  .sdm-radio span {
-    display: inline-flex;
-    padding-right: 0px;
-  }
-  .sdm-overwrite-msg {
-    margin: ${theme.sizeUnit * 2}px;
-  }
-  .sdm-overwrite-container {
-    flex: 1 1 auto;
-    display: flex;
+    .sdm-body {
+      padding: ${theme.sizeUnit * 4}px ${theme.sizeUnit * 6}px;
+    }
+
+    .sdm-prompt {
+      margin-bottom: ${theme.sizeUnit * 4}px;
+      color: ${theme.colorTextSecondary};
+    }
+
+    .sdm-radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.sizeUnit * 6}px;
+    }
+
+    .sdm-radio-option {
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.sizeUnit * 3}px;
+    }
+
+    .sdm-radio {
+      margin: 0;
+      .ant-radio {
+        margin-right: ${theme.sizeUnit * 2}px;
+      }
+      .ant-radio-wrapper {
+        color: ${theme.colorText};
+      }
+    }
+
+    .sdm-form-field {
+      margin-left: 0;
+      max-width: 400px;
+    }
+
+    .sdm-overwrite-msg {
+      padding: ${theme.sizeUnit * 4}px ${theme.sizeUnit * 6}px;
+      text-align: center;
+      color: ${theme.colorText};
+    }
   `}
 `;
 const updateDataset = async (
@@ -438,21 +452,27 @@ export const SaveDatasetModal = ({
                 setNewOrOverwrite(Number(e.target.value));
               }}
               value={newOrOverwrite}
+              className="sdm-radio-group"
             >
-              <Radio className="sdm-radio" value={1}>
-                {t('Save as new')}
-                <Input
-                  className="sdm-input"
-                  value={datasetName}
-                  onChange={handleDatasetNameChange}
-                  disabled={newOrOverwrite !== 1}
-                />
-              </Radio>
-              <div className="sdm-overwrite-container">
+              <div className="sdm-radio-option">
+                <Radio className="sdm-radio" value={1}>
+                  {t('Save as new')}
+                </Radio>
+                <div className="sdm-form-field">
+                  <Input
+                    value={datasetName}
+                    onChange={handleDatasetNameChange}
+                    disabled={newOrOverwrite !== 1}
+                    placeholder={t('Dataset name')}
+                  />
+                </div>
+              </div>
+
+              <div className="sdm-radio-option">
                 <Radio className="sdm-radio" value={2}>
                   {t('Overwrite existing')}
                 </Radio>
-                <div className="sdm-autocomplete">
+                <div className="sdm-form-field">
                   <AsyncSelect
                     allowClear
                     showSearch

superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx

@@ -222,7 +222,7 @@ describe('SavedQuery', () => {
     const closeBtn = screen.getByRole('button', { name: /close/i });
     const saveDatasetHeader = screen.getByText(/save or overwrite dataset/i);
     const saveRadio = screen.getByRole('radio', {
-      name: /save as new untitled/i,
+      name: /save as new/i,
     });
     const saveLabel = screen.getByText(/save as new/i);
     const saveTextbox = screen.getByRole('textbox');