Normalize and centralize spacing of components#613
Open
Felipedino wants to merge 3 commits into
Open
Conversation
…ed layout - Increased padding and margin values in NewItemButton, OptionBox, SearchBar, and SelectOptionMenu for better visual balance. - Adjusted spacing in CustomTooltip and SidebarSection to enhance user experience. - Modified padding in Home, NewPipeline, and PluginsCard to create a more spacious layout. - Updated grid spacing in PluginsContent, PluginsDetails, and PluginsTab for consistency. - Enhanced layout in LiveMetricsChart, MetricsCard, and ResultsDetailsLayout for improved readability. - Increased spacing in ResultsTabInfo and ResultsTabMetrics for better separation of content. - Introduced a new spacing scale in theme.js to standardize layout adjustments across the application.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR standardizes and increases whitespace across the frontend UI by adjusting MUI spacing props (p, m, gap, spacing, etc.) and introduces theme-level spacing/layout tokens to help centralize future layout constants.
Changes:
- Added theme-level spacing configuration (
spacing: 4) and alayoutsection (spacing tokens + shared dimensions). - Increased padding/margins/gaps across Results, Plugins, Pipelines, Notebooks/Datasets, Models, Explorations, Explainers, and Generative UI components.
- Refactored at least one layout calculation to reference the centralized theme dimension token (
appBarHeightLg).
Reviewed changes
Copilot reviewed 249 out of 249 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| DashAI/front/src/styles/theme.js | Adds global spacing base + layout tokens for spacing and shared dimensions. |
| DashAI/front/src/pages/results/components/ResultsTabParametersDisplayList.jsx | Increases nested list indentation and secondary text margin. |
| DashAI/front/src/pages/results/components/ResultsTabMetricsRuns.jsx | Increases spacing and padding around metrics run content. |
| DashAI/front/src/pages/results/components/ResultsTabMetrics.jsx | Increases row spacing in metrics tab layout. |
| DashAI/front/src/pages/results/components/ResultsTableLayout.jsx | Increases Paper padding and header padding. |
| DashAI/front/src/pages/results/components/ResultsTabInfoName.jsx | Increases grid row/column spacing. |
| DashAI/front/src/pages/results/components/ResultsTabInfoDate.jsx | Increases grid row/column spacing. |
| DashAI/front/src/pages/results/components/ResultsTabHyperparameters.jsx | Increases Grid spacing for hyperparameter plots. |
| DashAI/front/src/pages/results/components/ResultsGraphsSwitch.jsx | Increases bottom margin under the switch header. |
| DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx | Increases selection bar spacing/padding. |
| DashAI/front/src/pages/results/components/ResultsGraphsPlot.jsx | Increases plot placeholder margin. |
| DashAI/front/src/pages/results/components/ResultsGraphsParameters.jsx | Increases padding and control spacing in metrics parameter panel. |
| DashAI/front/src/pages/results/components/ResultsGraphs.jsx | Increases warning alert bottom margin. |
| DashAI/front/src/pages/results/components/ResultsDialogViews.jsx | Increases spacing around results view selector controls. |
| DashAI/front/src/pages/results/components/ResultsDetailsLayout.jsx | Increases margins/padding in results details container. |
| DashAI/front/src/pages/results/components/MetricsCard.jsx | Increases card padding and internal spacing. |
| DashAI/front/src/pages/results/components/LiveMetricsChart.jsx | Increases layout spacing around live metrics controls. |
| DashAI/front/src/pages/plugins/components/PluginsToolbar.jsx | Increases toolbar padding and grid spacing. |
| DashAI/front/src/pages/plugins/components/PluginsTags.jsx | Increases chip column gap for tags. |
| DashAI/front/src/pages/plugins/components/PluginsTab.jsx | Increases header vertical padding. |
| DashAI/front/src/pages/plugins/components/PluginsDetails.jsx | Increases action spacing and details page padding/margins. |
| DashAI/front/src/pages/plugins/components/PluginsContent.jsx | Increases grid spacing for plugin list/cards. |
| DashAI/front/src/pages/plugins/components/PluginsCard.jsx | Adjusts spacing in plugin card layouts (gap/margins/padding). |
| DashAI/front/src/pages/pipelines/NewPipeline.jsx | Increases page padding in pipeline designer/results view. |
| DashAI/front/src/pages/home/Home.jsx | Rebalances sidebar and page header paddings/gaps. |
| DashAI/front/src/components/tour/CustomTooltip.jsx | Increases button group spacing in tour tooltip. |
| DashAI/front/src/components/threeSectionLayout/SelectOptionMenu.jsx | Increases spacing for alert + option grid. |
| DashAI/front/src/components/threeSectionLayout/SearchBar.jsx | Increases input vertical padding. |
| DashAI/front/src/components/threeSectionLayout/OptionBox.jsx | Increases arrow left margin. |
| DashAI/front/src/components/threeSectionLayout/NewItemButton.jsx | Increases horizontal padding. |
| DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx | Increases gap between menu items. |
| DashAI/front/src/components/threeSectionLayout/ItemBox.jsx | Increases item padding. |
| DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx | Increases list container/header/group spacing and padding. |
| DashAI/front/src/components/threeSectionLayout/DeleteConfirmationModal.jsx | Increases warning alert top margin. |
| DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx | Increases list container/header spacing and padding. |
| DashAI/front/src/components/shared/TextWithOptions.jsx | Increases bottom padding under labeled row. |
| DashAI/front/src/components/shared/SingleSelectChipGroup.jsx | Increases chip group grid spacing. |
| DashAI/front/src/components/shared/NestedListDisplayer.jsx | Increases nested list indentation and value spacing. |
| DashAI/front/src/components/shared/FormSchemaWithSelectedModel.jsx | Increases form stack spacing and vertical padding. |
| DashAI/front/src/components/shared/FormSchemaRenderFields.jsx | Increases default field spacing. |
| DashAI/front/src/components/shared/FormSchemaOptimizer.jsx | Increases optimizer control spacing and alignment padding. |
| DashAI/front/src/components/shared/FormSchemaLayout.jsx | Increases layout gap around schema content. |
| DashAI/front/src/components/shared/FormSchemaHeader.jsx | Increases title left margin next to back button. |
| DashAI/front/src/components/shared/FormSchemaFieldWithOptimizers.jsx | Increases switch row gap. |
| DashAI/front/src/components/shared/FormSchemaButtonGroup.jsx | Increases footer spacing and button gap. |
| DashAI/front/src/components/shared/BoxWithTitle.jsx | Increases title chip horizontal padding. |
| DashAI/front/src/components/ResponsiveAppBar.jsx | Increases toolbar padding and spacing between header elements. |
| DashAI/front/src/components/predictions/ResultsTable.jsx | Increases spacing around prediction results status and loading UI. |
| DashAI/front/src/components/predictions/PredictionsTable.jsx | Increases spacing in empty state and headings. |
| DashAI/front/src/components/predictions/PredictionModal.jsx | Increases tab/header padding and dialog actions padding. |
| DashAI/front/src/components/predictions/ModeSelector.jsx | Increases spacing/padding in prediction mode selector cards. |
| DashAI/front/src/components/predictions/ManualInputForm.jsx | Increases form heading spacing and action row gap. |
| DashAI/front/src/components/predictions/InputField.jsx | Increases inline field gap. |
| DashAI/front/src/components/predictions/DatasetSelector.jsx | Increases spacing around dataset selection and info alert. |
| DashAI/front/src/components/pipelines/results/ResultsPredictionModal.jsx | Increases tab panel padding. |
| DashAI/front/src/components/pipelines/results/ResultsMetrics.jsx | Increases metrics layout rowSpacing/spacing. |
| DashAI/front/src/components/pipelines/results/ResultsGraphs.jsx | Increases warning alert bottom margin. |
| DashAI/front/src/components/pipelines/results/ResultsExploration.jsx | Increases padding in exploration results container. |
| DashAI/front/src/components/pipelines/results/Results.jsx | Increases padding around pipeline results sections. |
| DashAI/front/src/components/pipelines/PipelineToolbar.jsx | Increases toolbar bottom margin and field spacing. |
| DashAI/front/src/components/pipelines/PipelinesTable.jsx | Increases spacing in actions cell and table header controls. |
| DashAI/front/src/components/pipelines/PipelineHeader.jsx | Increases header margin and button spacing. |
| DashAI/front/src/components/pipelines/ParamsSettings.jsx | Increases dialog title padding and field stack spacing. |
| DashAI/front/src/components/pipelines/NodeSidebar.jsx | Increases sidebar paddings/margins and help section spacing. |
| DashAI/front/src/components/pipelines/nodes/TrainNode.jsx | Increases form section spacing and checkbox margins. |
| DashAI/front/src/components/pipelines/nodes/RetrieveModelNode.jsx | Increases modal padding and grid spacing. |
| DashAI/front/src/components/pipelines/nodes/ExplorationModal.jsx | Increases top margin before configuration step. |
| DashAI/front/src/components/pipelines/nodes/DataSelectorNode.jsx | Increases modal padding and grid spacing. |
| DashAI/front/src/components/pipelines/nodes/ConfigurableNode.jsx | Increases vertical spacing between config fields. |
| DashAI/front/src/components/pipelines/CustomNode.jsx | Increases label bottom margin. |
| DashAI/front/src/components/notebooks/tool/ToolListItem.jsx | Increases padding/gap within tool list item rows. |
| DashAI/front/src/components/notebooks/tool/ToolList.jsx | Increases list/accordion spacing and paddings. |
| DashAI/front/src/components/notebooks/tool/ToolGridItem.jsx | Increases padding and internal spacing in tool cards. |
| DashAI/front/src/components/notebooks/tool/ToolGrid.jsx | Increases category gaps and header spacing in tool grid. |
| DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx | Increases tooltip padding and content spacing. |
| DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx | Increases padding and spacing across modal sections. |
| DashAI/front/src/components/notebooks/RowSelector.jsx | Increases spacing/padding throughout row selection UI. |
| DashAI/front/src/components/notebooks/NoteBox.jsx | Increases note container padding and title margin. |
| DashAI/front/src/components/notebooks/notebookCreation/UploadNotebookSteps.jsx | Increases section spacing and footer button gaps. |
| DashAI/front/src/components/notebooks/notebookCreation/DatasetAutocomplete.jsx | Increases spacing in autocomplete and selected dataset summary. |
| DashAI/front/src/components/notebooks/notebook/NotebookVisualization.jsx | Increases divider spacing. |
| DashAI/front/src/components/notebooks/notebook/NotebookView.jsx | Increases vertical spacing between notebook row items. |
| DashAI/front/src/components/notebooks/notebook/NotebookHistoryModal.jsx | Increases top margin and empty-state padding. |
| DashAI/front/src/components/notebooks/notebook/InfoNotebookModal.jsx | Increases modal padding and typography spacing. |
| DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx | Increases header/action spacing and button paddings. |
| DashAI/front/src/components/notebooks/explorerCreation/ScopeStepExplorer.jsx | Increases container gaps and footer control spacing. |
| DashAI/front/src/components/notebooks/explorerCreation/ParameterStepExplorer.jsx | Increases title bottom margin. |
| DashAI/front/src/components/notebooks/explorer/visualizations/PlotlyJsonVisualizer.jsx | Increases header/control gap. |
| DashAI/front/src/components/notebooks/explorer/tabs/Parameters.jsx | Increases divider spacing and table row padding. |
| DashAI/front/src/components/notebooks/explorer/tabs/Info.jsx | Increases grid spacing and divider spacing. |
| DashAI/front/src/components/notebooks/explorer/tabs/Columns.jsx | Increases divider spacing and row paddings. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/PlotLayoutForm.jsx | Increases padding/gaps across plot layout editor UI. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/forms/YAxisForm.jsx | Increases form field vertical gaps. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/forms/XAxisForm.jsx | Increases form field vertical gaps. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/forms/TraceForm.jsx | Increases form field vertical gaps. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/forms/LegendForm.jsx | Increases spacing between legend controls. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/forms/GeneralForm.jsx | Increases spacing between general plot layout controls. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/forms/DimensionsForm.jsx | Increases padding and spacing in dimensions editor. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/DebouncedColorPicker.jsx | Increases control gap. |
| DashAI/front/src/components/notebooks/explorer/plotLayout/ColorscaleSelector.jsx | Increases padding and spacing in colorscale editor. |
| DashAI/front/src/components/notebooks/explorer/ExplorerDetailsModal.jsx | Increases spacing/padding across explorer details modal. |
| DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx | Increases box header spacing and loading state paddings. |
| DashAI/front/src/components/notebooks/DescriptionPanel.jsx | Increases panel padding. |
| DashAI/front/src/components/notebooks/DatasetNotebookLeftBar.jsx | Increases sidebar paddings around controls. |
| DashAI/front/src/components/notebooks/datasetCreation/UploadDatasetSteps.jsx | Increases title bottom margin. |
| DashAI/front/src/components/notebooks/datasetCreation/Upload.jsx | Increases upload area spacing and padding. |
| DashAI/front/src/components/notebooks/datasetCreation/TypeChangeValidator.jsx | Increases spacing around validation/loading/warnings UI. |
| DashAI/front/src/components/notebooks/datasetCreation/SelectDataloaderStep.jsx | Increases stack spacing and footer gaps. |
| DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx | Increases spacing in save dataset modal content. |
| DashAI/front/src/components/notebooks/datasetCreation/PreviewDatasetTable.jsx | Increases inline spacing and select/input paddings. |
| DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx | Increases padding and header spacing in preview screen. |
| DashAI/front/src/components/notebooks/datasetCreation/DataloaderConfiguration.jsx | Increases stack spacing in dataloader configuration UI. |
| DashAI/front/src/components/notebooks/datasetCreation/DataloaderConfigBar.jsx | Increases padding/spacing in config sidebar and header. |
| DashAI/front/src/components/notebooks/datasetCreation/ConfigureAndUploadDatasetStep.jsx | Increases form spacing and footer gaps. |
| DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx | Increases section gaps and header spacing. |
| DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx | Increases spacing around headings, charts, and list items. |
| DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx | Increases spacing around categorical stats and charts. |
| DashAI/front/src/components/notebooks/dataset/StatBox.jsx | Increases stat box padding. |
| DashAI/front/src/components/notebooks/dataset/QualityAlerts.jsx | Increases accordion spacing and alert spacing. |
| DashAI/front/src/components/notebooks/dataset/MrtDatasetTableInfScroll.jsx | Increases bottom toolbar padding. |
| DashAI/front/src/components/notebooks/dataset/IssueCard.jsx | Increases padding/gaps inside issue card UI. |
| DashAI/front/src/components/notebooks/dataset/InferenceReasonPopover.jsx | Increases padding and spacing in popover trigger/content. |
| DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx | Increases header box padding/gap and text spacing. |
| DashAI/front/src/components/notebooks/dataset/header/Header.jsx | Increases container gaps. |
| DashAI/front/src/components/notebooks/dataset/EditableColumnHeader.jsx | Increases input group gaps and paddingY in text field. |
| DashAI/front/src/components/notebooks/dataset/DatasetSummaryTable.jsx | Increases loading state padding. |
| DashAI/front/src/components/notebooks/dataset/DatasetsCenterContent.jsx | Increases center content paddings. |
| DashAI/front/src/components/notebooks/dataset/ColumnInsights.jsx | Increases padding and spacing in insights panel/list. |
| DashAI/front/src/components/notebooks/DataBreadcrumbs.jsx | Increases breadcrumbs spacing. |
| DashAI/front/src/components/notebooks/converterCreation/ScopeStepConverter.jsx | Increases gaps and footer spacing in converter scope step. |
| DashAI/front/src/components/notebooks/converterCreation/ParameterStepConverter.jsx | Increases title bottom margin. |
| DashAI/front/src/components/notebooks/converterCreation/ConverterTargetColumnModal.jsx | Increases spacing/padding in target column modal. |
| DashAI/front/src/components/notebooks/converter/ItemsToDeleteList.jsx | Increases padding and item row padding. |
| DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx | Increases icon/button spacing. |
| DashAI/front/src/components/notebooks/converter/ConverterBox.jsx | Increases header spacing and internal paddings. |
| DashAI/front/src/components/notebooks/ColumnSelector.jsx | Increases spacing around constraints/help text. |
| DashAI/front/src/components/models/TaskSelector.jsx | Increases spacing in task selector heading/grid. |
| DashAI/front/src/components/models/SetNameAndDatasetStep.jsx | Increases vertical gap in step content. |
| DashAI/front/src/components/models/SessionVisualization.jsx | Increases padding/divider/stack spacing throughout session view. |
| DashAI/front/src/components/models/RetrainConfirmDialog.jsx | Increases alert and content spacing. |
| DashAI/front/src/components/models/PredictionCard.jsx | Increases internal spacing in prediction card states. |
| DashAI/front/src/components/models/ModelsRightBar.jsx | Increases padding around search and list sections. |
| DashAI/front/src/components/models/ModelsLeftBar.jsx | Increases sidebar padding for controls. |
| DashAI/front/src/components/models/modelSession/SetNameAndTaskStep.jsx | Increases spacing in wizard step layout and inputs. |
| DashAI/front/src/components/models/modelSession/SelectDatasetStep.jsx | Increases spacing in dataset select step and warning alert. |
| DashAI/front/src/components/models/modelSession/RunnerDialog.jsx | Increases table/action spacing and dialog paddings. |
| DashAI/front/src/components/models/modelSession/PrepareDatasetStep.jsx | Increases spacing in validation/alerts and grid layout. |
| DashAI/front/src/components/models/modelSession/OptimizationTable.jsx | Increases action cell gap and Paper padding/margins. |
| DashAI/front/src/components/models/modelSession/ModelsTable.jsx | Increases action cell gap and Paper padding/margins. |
| DashAI/front/src/components/models/modelSession/metrics/SplitColumn.jsx | Increases padding and vertical spacing for metrics list. |
| DashAI/front/src/components/models/modelSession/metrics/MetricsSelector.jsx | Increases padding/spacing across selector UI. |
| DashAI/front/src/components/models/modelSession/metrics/MetricCard.jsx | Increases card padding and internal spacing. |
| DashAI/front/src/components/models/modelSession/HyperparameterOptimizationStep.jsx | Increases spacing between sections. |
| DashAI/front/src/components/models/modelSession/DivideDatasetColumns.jsx | Increases gaps and expands bottom margins (spacing adjustments). |
| DashAI/front/src/components/models/modelSession/ConfigureModelsStep.jsx | Increases grid spacing between model config cards. |
| DashAI/front/src/components/models/ModelsBreadcrumbs.jsx | Increases breadcrumbs spacing. |
| DashAI/front/src/components/models/ModelParamBlock.jsx | Increases spacing in param block and table paddings. |
| DashAI/front/src/components/models/ModelComparisonTable.jsx | Increases small spacing values across table controls/cells. |
| DashAI/front/src/components/models/ModelCenterContent.jsx | Increases center content padding. |
| DashAI/front/src/components/models/model/ModelListItem.jsx | Increases padding/gap inside model list item rows. |
| DashAI/front/src/components/models/model/HoverModelInfo.jsx | Increases hover card padding and title spacing. |
| DashAI/front/src/components/models/ManualPredictionPanel.jsx | Increases spacing around empty state and preview section. |
| DashAI/front/src/components/models/LiveMetricsChart.jsx | Increases tabs bottom margin. |
| DashAI/front/src/components/models/InfoSessionModal.jsx | Increases modal padding and typography spacing. |
| DashAI/front/src/components/models/HyperparameterPlots.jsx | Increases padding and spacing around plots. |
| DashAI/front/src/components/models/DatasetPredictionPanel.jsx | Increases loading state padding and button row gap. |
| DashAI/front/src/components/models/CreateSessionSteps.jsx | Increases step paddings and footer gaps. |
| DashAI/front/src/components/models/AddModelDialog.jsx | Increases stepper/content spacing and dialog actions padding. |
| DashAI/front/src/components/layout/ModuleContainer.jsx | Uses theme dimension token for viewport height calculation. |
| DashAI/front/src/components/LanguageSelector.jsx | Increases select input gap. |
| DashAI/front/src/components/jobs/JobQueueWidget.jsx | Increases minor spacing in widget header/actions. |
| DashAI/front/src/components/jobs/JobDetailsDialog.jsx | Increases spacing in details dialog layout and error section. |
| DashAI/front/src/components/HomeButton.jsx | Increases arrow left margin. |
| DashAI/front/src/components/hardware/HardwareMonitorPanel.jsx | Increases spacing/padding within hardware monitor panel. |
| DashAI/front/src/components/generative/VideoMessage.jsx | Increases vertical gap between media elements. |
| DashAI/front/src/components/generative/textMessage/InlineCode.jsx | Increases inline code padding. |
| DashAI/front/src/components/generative/textMessage/CodeBlock.jsx | Increases code block margins and header padding. |
| DashAI/front/src/components/generative/SessionHistoryModal.jsx | Increases spacing across history accordion content. |
| DashAI/front/src/components/generative/SessionBox.jsx | Increases item padding and label padding-left. |
| DashAI/front/src/components/generative/SessionBar.jsx | Increases sidebar padding for controls. |
| DashAI/front/src/components/generative/ParamsBar.jsx | Increases padding and spacing in params sidebar and form footer. |
| DashAI/front/src/components/generative/MessageContent.jsx | Increases vertical spacing between message blocks. |
| DashAI/front/src/components/generative/mediaInput/MediaPreviewList.jsx | Increases gap in media preview list. |
| DashAI/front/src/components/generative/mediaInput/MediaOnlyPlaceholder.jsx | Increases padding and spacing in placeholder UI. |
| DashAI/front/src/components/generative/mediaInput/MediaAttachPopper.jsx | Increases spacing between attach options. |
| DashAI/front/src/components/generative/MediaInput.jsx | Increases gap and internal spacing in media input controls. |
| DashAI/front/src/components/generative/InfoSessionModal.jsx | Increases modal padding and typography spacing. |
| DashAI/front/src/components/generative/GenerativeChat.jsx | Increases spacing/padding across chat container layout. |
| DashAI/front/src/components/generative/GenerativeBreadcrumbs.jsx | Increases breadcrumbs spacing. |
| DashAI/front/src/components/generative/CreateSessionRight.jsx | Increases padding/spacing in create-session right panel. |
| DashAI/front/src/components/generative/CreateSessionCenter.jsx | Increases padding/spacing in create-session center panel. |
| DashAI/front/src/components/generative/ChatTimeStamp.jsx | Increases timestamp spacing. |
| DashAI/front/src/components/generative/ChatBubble.jsx | Increases bubble bottom margin and meta spacing. |
| DashAI/front/src/components/generative/AudioMessage.jsx | Increases vertical gap between audio elements. |
| DashAI/front/src/components/explorations/Visualizations/PlotlyJsonVisualizer.jsx | Increases label padding/margins for plot overlay UI. |
| DashAI/front/src/components/explorations/Steps/ConfigureExplorersStep.jsx | Increases spacing in explorer configuration step layout. |
| DashAI/front/src/components/explorations/ResultsViewer.jsx | Increases spacing around results view header/tabs. |
| DashAI/front/src/components/explorations/ResultsByExplorer.jsx | Increases action cell gap and container padding. |
| DashAI/front/src/components/explorations/ResultsAll.jsx | Increases container padding and grid spacing. |
| DashAI/front/src/components/explorations/explorers/ExplorersTable.jsx | Increases action cell gap, Paper padding, and header margin. |
| DashAI/front/src/components/explorations/explorers/ExplorerDetails.jsx | Increases details layout padding and top margin. |
| DashAI/front/src/components/explorations/explorers/EditColumnsDialog.jsx | Increases spacing throughout edit columns dialog content. |
| DashAI/front/src/components/explorations/explorers/DetailTabs/Info.jsx | Increases grid spacing and divider spacing. |
| DashAI/front/src/components/explorations/ExplorationsTable.jsx | Increases action cell gap and container padding. |
| DashAI/front/src/components/explorations/Explorations.jsx | Increases top-level paddings/margins and layout gaps. |
| DashAI/front/src/components/explorations/ExplorationRunner.jsx | Increases container gap and Paper padding. |
| DashAI/front/src/components/explorations/ExplorationEditor.jsx | Increases title bottom margin on small screens. |
| DashAI/front/src/components/explainers/SplitSelector.jsx | Increases spacing/padding across split selection UI. |
| DashAI/front/src/components/explainers/SetNameAndExplainerStep.jsx | Increases spacing in explainer naming/selection step. |
| DashAI/front/src/components/explainers/SelectDatasetStep.jsx | Increases warning alert bottom margin. |
| DashAI/front/src/components/explainers/ParameterListItem.jsx | Increases nested list indentation and secondary text margin. |
| DashAI/front/src/components/explainers/InlineExplainerCreator.jsx | Increases paper padding and stepper section spacing. |
| DashAI/front/src/components/explainers/ExplainersPlot.jsx | Increases form control margin and error padding. |
| DashAI/front/src/components/explainers/ExplainersCard.jsx | Increases spacing in compact and full explainer card layouts. |
| DashAI/front/src/components/explainers/ExplainerConfiguration.jsx | Increases padding in explainer configuration container. |
| DashAI/front/src/components/explainers/ConfigureExplainerStep.jsx | Increases spacing and padding in configuration step UI. |
| DashAI/front/src/components/DatasetVisualization.jsx | Increases gaps/margins/divider spacing in dataset visualization view. |
| DashAI/front/src/components/datasets/Upload.jsx | Increases padding and row spacing in dataset upload screen. |
| DashAI/front/src/components/datasets/SelectDataloaderStep.jsx | Increases spacing and informational text margins. |
| DashAI/front/src/components/datasets/EditDataTypeModal.jsx | Increases padding and description margin. |
| DashAI/front/src/components/datasets/EditDatasetModal.jsx | Increases spacing in edit dataset name dialog. |
| DashAI/front/src/components/datasets/DatasetSummaryStep.jsx | Increases padding and description margin in summary step. |
| DashAI/front/src/components/datasets/DatasetSummaryModal.jsx | Increases grid spacing in summary modal content. |
| DashAI/front/src/components/datasets/DatasetPreviewStep.jsx | Increases padding and description margin in preview step. |
| DashAI/front/src/components/datasets/DatasetModal.jsx | Increases title grid spacing and responsive margin. |
| DashAI/front/src/components/datasets/DataloaderConfiguration.jsx | Increases Paper padding and stack spacing. |
| DashAI/front/src/components/datasets/ConverterTable.jsx | Increases action button gap in table cells. |
| DashAI/front/src/components/datasets/converterModals/ConverterClassColumnModal.jsx | Increases spacing/padding in class/target column modal. |
| DashAI/front/src/components/datasets/ConvertDatasetModal.jsx | Increases spacing throughout convert dataset modal sections. |
| DashAI/front/src/components/datasets/ConfigureAndUploadDataset.jsx | Increases Paper padding and grid spacing. |
| DashAI/front/src/components/configurableObject/SplitsParams.jsx | Increases divider spacing around split params section. |
| DashAI/front/src/components/configurableObject/Inputs/NumberInputOptimize.jsx | Increases spacing in optimize bounds inputs and label margins. |
| DashAI/front/src/components/configurableObject/Inputs/IntegerInputOptimize.jsx | Increases spacing in optimize bounds inputs and label margins. |
| DashAI/front/src/components/configurableObject/Inputs/FormInputWrapper.jsx | Increases wrapper gap and tooltip padding-top alignment. |
| DashAI/front/src/components/configurableObject/Inputs/ClassInput.jsx | Increases collapse/paper spacing around subform UI. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request makes a comprehensive pass to increase spacing and padding throughout the UI components in the frontend, resulting in a more visually spacious and consistent design. The changes primarily adjust the
gap,padding,margin, and related spacing properties in various components, improving readability and alignment.The most important changes are:
Global UI Spacing and Padding Enhancements:
gap,padding, andmarginvalues in key layout components such asDatasetVisualization,ResponsiveAppBar,ComponentDetailsPanel, andComponentSelectorfor a more open and consistent appearance. This includes changes to Box, Stack, Divider, Grid, and Typography elements across the UI. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29] [30] [31] [32]Component-Specific Improvements:
ClassInput,FormInputWrapper,OptimizeIntegerInput,OptimizeNumberInput) by increasing padding and spacing for better usability and clarity. [1] [2] [3] [4] [5] [6]ComponentSelectorandComponentDetailsPanelto use larger spacing between elements, making lists and details easier to scan and interact with. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]These changes collectively modernize the UI, making it more visually appealing and user-friendly by standardizing and increasing whitespace throughout the application.