ui: zero Container padding (space kept for types) so header/footer use only their own insets
This commit is contained in:
1 parent
c648e7ae19
commit
379b3d3370
1 file changed
+5
-9
+5
-9
@@ -26,19 +26,15 @@ const MIN_WINDOW_SIZE = { width: 320, height: 200 }
|
||||
// Full plugin version shown in the footer status bar. Keep in sync with package.json "version".
|
||||
const PLUGIN_VERSION = '0.1.0'
|
||||
|
||||
// Full-bleed separator: breaks out of the Container's horizontal `space="medium"` padding
|
||||
// (which is `0 var(--space-medium)`) so the line spans the whole window edge-to-edge.
|
||||
// Full-bleed separator: Container has no horizontal padding, so the <hr> (flex item,
|
||||
// stretched to full width) spans the whole window edge-to-edge.
|
||||
function Separator () {
|
||||
return (
|
||||
<hr
|
||||
style={{
|
||||
border: 'none',
|
||||
height: '1px',
|
||||
backgroundColor: 'var(--figma-color-border)',
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
marginLeft: 'calc(-1 * var(--space-medium))',
|
||||
marginRight: 'calc(-1 * var(--space-medium))'
|
||||
backgroundColor: 'var(--figma-color-border)'
|
||||
}}
|
||||
/>
|
||||
)
|
||||
@@ -337,7 +333,7 @@ function Plugin () {
|
||||
|
||||
return (
|
||||
<div className="plugin-root" style={{ position: 'relative', width: '100%', height: '100%' }}>
|
||||
<Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: 0 }}>
|
||||
{/* Header — navigation bar */}
|
||||
<header style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto', padding: 'var(--space-8)' }}>
|
||||
<Text style={{ fontSize: '13px', fontWeight: 600 }}>Settings</Text>
|
||||
@@ -361,7 +357,7 @@ function Plugin () {
|
||||
</header>
|
||||
<Separator />
|
||||
{/* Body — semantic <main>, stretches via flex child of the column */}
|
||||
<main style={{ flex: '1 1 auto', overflow: 'auto' }}>
|
||||
<main style={{ flex: '1 1 auto', overflow: 'auto', padding: 'var(--space-8)' }}>
|
||||
{/* empty placeholder for now */}
|
||||
</main>
|
||||
{/* Footer — status bar */}
|
||||
|
||||
Reference in new issue
Block a user