This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch flask_config in repository https://gitbox.apache.org/repos/asf/superset.git
commit c2a05ea91940380ccc495fbe70d263e0e3b98d49 Author: Maxime Beauchemin <[email protected]> AuthorDate: Fri Jul 18 03:04:29 2025 -0700 feat: make configuration table denser with smaller fonts - Reduced cell padding from 12px to 8px for more compact layout - Decreased font sizes: headers 13px, content 12px, badges 10px - Removed title-cased labels in leftmost column, showing only config key - Made badges smaller with reduced padding (1px 6px instead of 2px 8px) - Improved information density while maintaining readability 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> --- docs/src/components/ConfigurationTable.tsx | 74 ++++++++++++++++++------------ 1 file changed, 45 insertions(+), 29 deletions(-) diff --git a/docs/src/components/ConfigurationTable.tsx b/docs/src/components/ConfigurationTable.tsx index d2e67e81bf..ce065a3901 100644 --- a/docs/src/components/ConfigurationTable.tsx +++ b/docs/src/components/ConfigurationTable.tsx @@ -51,9 +51,9 @@ const ImpactBadge: React.FC<{ impact: string }> = ({ impact }) => { style={{ backgroundColor: colors[impact] || '#d9d9d9', color: 'white', - padding: '2px 8px', - borderRadius: '4px', - fontSize: '12px', + padding: '1px 6px', + borderRadius: '3px', + fontSize: '10px', fontWeight: 'bold', }} > @@ -72,11 +72,11 @@ const RestartBadge: React.FC<{ requiresRestart: boolean }> = ({ style={{ backgroundColor: '#ff7875', color: 'white', - padding: '2px 8px', - borderRadius: '4px', - fontSize: '12px', + padding: '1px 6px', + borderRadius: '3px', + fontSize: '10px', fontWeight: 'bold', - marginLeft: '8px', + marginLeft: '6px', }} > RESTART @@ -153,36 +153,44 @@ const ConfigurationTable: React.FC<ConfigurationTableProps> = ({ <tr style={{ backgroundColor: '#f5f5f5' }}> <th style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', textAlign: 'left', + fontSize: '13px', + fontWeight: 'bold', }} > Setting </th> <th style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', textAlign: 'left', + fontSize: '13px', + fontWeight: 'bold', }} > Description </th> <th style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', textAlign: 'left', + fontSize: '13px', + fontWeight: 'bold', }} > Type </th> <th style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', textAlign: 'left', + fontSize: '13px', + fontWeight: 'bold', }} > Default @@ -190,9 +198,11 @@ const ConfigurationTable: React.FC<ConfigurationTableProps> = ({ {showEnvironmentVariables && ( <th style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', textAlign: 'left', + fontSize: '13px', + fontWeight: 'bold', }} > Environment Variable @@ -200,9 +210,11 @@ const ConfigurationTable: React.FC<ConfigurationTableProps> = ({ )} <th style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', textAlign: 'left', + fontSize: '13px', + fontWeight: 'bold', }} > Impact @@ -214,24 +226,23 @@ const ConfigurationTable: React.FC<ConfigurationTableProps> = ({ <tr key={setting.key}> <td style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', verticalAlign: 'top', + fontSize: '13px', }} > <div> - <strong>{setting.title}</strong> - <br /> - <code style={{ fontSize: '12px', color: '#666' }}> + <code style={{ fontSize: '13px', fontWeight: 'bold' }}> {setting.key} </code> {setting.documentation_url && ( - <div style={{ marginTop: '4px' }}> + <div style={{ marginTop: '2px' }}> <a href={setting.documentation_url} target="_blank" rel="noopener noreferrer" - style={{ fontSize: '12px' }} + style={{ fontSize: '11px' }} > 📖 Docs </a> @@ -241,43 +252,47 @@ const ConfigurationTable: React.FC<ConfigurationTableProps> = ({ </td> <td style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', verticalAlign: 'top', + fontSize: '12px', }} > {setting.description} </td> <td style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', verticalAlign: 'top', + fontSize: '12px', }} > - <code>{setting.type}</code> + <code style={{ fontSize: '12px' }}>{setting.type}</code> </td> <td style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', verticalAlign: 'top', + fontSize: '12px', }} > - <code style={{ fontSize: '12px' }}> + <code style={{ fontSize: '11px' }}> {formatDefault(setting.default)} </code> </td> {showEnvironmentVariables && ( <td style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', verticalAlign: 'top', + fontSize: '12px', }} > <div style={{ display: 'flex', alignItems: 'center' }}> - <code style={{ fontSize: '12px', marginRight: '8px' }}> + <code style={{ fontSize: '11px', marginRight: '6px' }}> {setting.env_var} </code> <button @@ -286,7 +301,7 @@ const ConfigurationTable: React.FC<ConfigurationTableProps> = ({ background: 'none', border: 'none', cursor: 'pointer', - fontSize: '12px', + fontSize: '11px', color: '#1890ff', }} title="Copy to clipboard" @@ -295,7 +310,7 @@ const ConfigurationTable: React.FC<ConfigurationTableProps> = ({ </button> </div> {setting.nested_example && ( - <div style={{ marginTop: '4px' }}> + <div style={{ marginTop: '2px' }}> <code style={{ fontSize: '10px', color: '#666' }}> {setting.nested_example} </code> @@ -305,9 +320,10 @@ const ConfigurationTable: React.FC<ConfigurationTableProps> = ({ )} <td style={{ - padding: '12px', + padding: '8px', border: '1px solid #ddd', verticalAlign: 'top', + fontSize: '12px', }} > <ImpactBadge impact={setting.impact} />
