Small UI fixes for new Space creation/settings page (#197303)

ek-so · kibanamachine · elasticmachine · web-flow · commit aaa9604973bf · 2024-10-24T05:23:56.000+02:00
## Summary [According to this PRD](https://docs.google.com/document/d/1HC_YjDtIzRvweU-oy6K2DevKfSvwfdHHZbjLFA43xls/edit#heading=h.jf3bwdwv0goe). * Solution selection inside space settings is now full width (point 7) * "Solution view" in features visibility section is not bold anymore (point 8) * Slightly tweaked placement for header and badges (point 14) ![CleanShot 2024-10-22 at 18 47 34@2x](https://github.com/user-attachments/assets/831772e4-e342-4999-baa4-79ec7341ffa9) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
diff --git a/x-pack/plugins/spaces/public/management/components/enabled_features/__snapshots__/enabled_features.test.tsx.snap b/x-pack/plugins/spaces/public/management/components/enabled_features/__snapshots__/enabled_features.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/management/components/enabled_features/enabled_features.tsx b/x-pack/plugins/spaces/public/management/components/enabled_features/enabled_features.tsx
@@ -43,12 +43,10 @@ export const EnabledFeatures: FunctionComponent<Props> = (props) => {
                 defaultMessage="Choose the features to display in the navigation menu for users of this space. If you want to focus on a single solution, you can simplify the navigation even more by selecting a {solutionView}."
                 values={{
                   solutionView: (
-                    <strong>
-                      <FormattedMessage
-                        id="xpack.spaces.management.enabledSpaceFeatures.chooseFeaturesToDisplaySolutionViewText"
-                        defaultMessage="Solution view"
-                      />
-                    </strong>
+                    <FormattedMessage
+                      id="xpack.spaces.management.enabledSpaceFeatures.chooseFeaturesToDisplaySolutionViewText"
+                      defaultMessage="Solution view"
+                    />
                   ),
                 }}
               />
diff --git a/x-pack/plugins/spaces/public/management/components/solution_view/solution_view.tsx b/x-pack/plugins/spaces/public/management/components/solution_view/solution_view.tsx
@@ -111,7 +111,7 @@ export const SolutionView: FunctionComponent<Props> = ({
 
   return (
     <SectionPanel title={sectionTitle} dataTestSubj="navigationPanel">
-      <EuiFlexGroup alignItems="flexStart">
+      <EuiFlexGroup alignItems="baseline">
         <EuiFlexItem>
           <EuiTitle size="xs">
             <EuiFlexGroup gutterSize="s">
@@ -163,6 +163,7 @@ export const SolutionView: FunctionComponent<Props> = ({
               onChange={(solution) => {
                 onChange({ ...space, solution });
               }}
+              fullWidth={true}
               placeholder={i18n.translate(
                 'xpack.spaces.management.navigation.solutionViewDefaultValue',
                 { defaultMessage: 'Select solution view' }
@@ -180,7 +181,7 @@ export const SolutionView: FunctionComponent<Props> = ({
                 />
               </EuiText>
 
-              <EuiSpacer />
+              <EuiSpacer size="m" />
               <EuiCallOut
                 color="primary"
                 size="s"
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space.tsx
@@ -212,7 +212,7 @@ export const EditSpace: FC<PageProps> = ({
       >
         <EuiFlexItem grow={true} css={{ flexBasis: '100%', width: '100%' }}>
           <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem grow={false} css={{ marginTop: '4px' }}>
               <HeaderAvatar />
             </EuiFlexItem>
             <EuiFlexItem grow={true}>
@@ -246,7 +246,7 @@ export const EditSpace: FC<PageProps> = ({
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 </EuiFlexItem>
-                <EuiFlexItem grow={false}>
+                <EuiFlexItem grow={false} css={{ marginTop: '4px' }}>
                   <div>
                     {shouldShowSolutionBadge ? (
                       <SpaceSolutionBadge
