Adjust spacings

Author: jperals

pages/app-layout/split-panel-with-custom-header.page.tsx

@@ -45,26 +45,32 @@ function EditableHeader({ onChange, value }: { onChange: (text: string) => void;
     }
   }, [editing]);
 
-  return editing ? (
-    <SpaceBetween direction="horizontal" size="xs">
-      <Input value={internalValue} onChange={({ detail }) => setInternalValue(detail.value)} ref={inputRef} />
-      <Button
-        variant="icon"
-        iconName="check"
-        onClick={() => {
-          onChange(internalValue);
-          setEditing(false);
-        }}
-      />
-      <Button variant="icon" iconName="close" onClick={() => setEditing(false)} />
-    </SpaceBetween>
-  ) : (
-    <>
-      <Box variant="h3" tagOverride="h2" display="inline" margin={{ vertical: 'n' }}>
-        {value}
-      </Box>{' '}
-      <Button variant="icon" iconName="edit" onClick={() => setEditing(true)}></Button>
-    </>
+  return (
+    <Box display="inline-block">
+      <SpaceBetween direction="horizontal" size="xxs" alignItems="center">
+        {editing ? (
+          <>
+            <Input value={internalValue} onChange={({ detail }) => setInternalValue(detail.value)} ref={inputRef} />
+            <Button
+              variant="icon"
+              iconName="check"
+              onClick={() => {
+                onChange(internalValue);
+                setEditing(false);
+              }}
+            />
+            <Button variant="icon" iconName="close" onClick={() => setEditing(false)} />
+          </>
+        ) : (
+          <>
+            <Box variant="h3" tagOverride="h2" display="inline" margin={{ vertical: 'n' }} padding={{ vertical: 'n' }}>
+              {value}
+            </Box>
+            <Button variant="icon" iconName="edit" onClick={() => setEditing(true)}></Button>
+          </>
+        )}
+      </SpaceBetween>
+    </Box>
   );
 }
 
@@ -112,15 +118,17 @@ export default function () {
             }
             headerBefore={
               (urlParams.renderBadge || urlParams.editableHeader) && (
-                <SpaceBetween direction="horizontal" size="xs" alignItems="center">
+                <>
                   {urlParams.renderBadge && <Badge>Badge</Badge>}
                   {urlParams.editableHeader && (
-                    <EditableHeader
-                      value={urlParams.headerText || ''}
-                      onChange={value => setUrlParams({ ...urlParams, headerText: value })}
-                    />
+                    <Box display="inline-block" margin={{ left: urlParams.renderBadge ? 'xs' : 'n' }}>
+                      <EditableHeader
+                        value={urlParams.headerText || ''}
+                        onChange={value => setUrlParams({ ...urlParams, headerText: value })}
+                      />
+                    </Box>
                   )}
-                </SpaceBetween>
+                </>
               )
             }
             headerDescription={urlParams.description}

src/split-panel/styles.scss

@@ -236,33 +236,24 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   }
 
   &-content,
-  &-tag,
-  &-main-row,
-  &-text-and-info,
-  &-text {
+  &-main-row {
     display: flex;
   }
 
-  &-main-row,
-  &-tag,
-  &-text-and-info,
-  &-text {
+  &-main-row {
+    flex: auto;
+    flex-direction: row;
     flex-wrap: wrap;
     column-gap: awsui.$space-scaled-xs;
     row-gap: awsui.$space-scaled-xxs;
+    align-items: center;
+    justify-content: space-between;
   }
 
   &-content {
     align-items: flex-start;
   }
 
-  &-main-row {
-    flex: auto;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-  }
-
   &-tag {
     flex-grow: 1;
     margin-block: 0;
@@ -273,17 +264,28 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     align-items: baseline;
   }
 
+  &-tag,
+  &-info-slot {
+    display: inline;
+  }
+
   &-text {
     $vertical-margin: calc(#{awsui.$space-scaled-xxs} + 1px);
+    display: inline-block;
     @include styles.font-panel-header;
     padding-block: 0;
     padding-inline: 0;
     margin-inline: 0;
+    margin-block: 0;
     margin-block-start: $vertical-margin;
-    margin-block-end: 0;
     min-block-size: calc(#{awsui.$font-panel-header-line-height} + #{$vertical-margin});
   }
 
+  &-before-slot + &-text,
+  &-tag + &-info-slot {
+    margin-inline-start: awsui.$space-scaled-xs;
+  }
+
   &-description {
     color: awsui.$color-text-heading-secondary;
     @include styles.font-body-m;