Fix style issues after Stack migration (#6086)

* Fix style issues after Stack migration

* Add release notes

packages/component-library/src/SpaceBetween.tsx

@@ -7,6 +7,7 @@ type SpaceBetweenProps = {
   direction?: 'horizontal' | 'vertical';
   gap?: number;
   wrap?: boolean;
+  align?: 'start' | 'center' | 'end' | 'stretch';
   style?: CSSProperties;
   children: ReactNode;
 };
@@ -15,6 +16,7 @@ export const SpaceBetween = ({
   direction = 'horizontal',
   gap = 15,
   wrap = true,
+  align = 'center',
   style,
   children,
   ...props
@@ -24,7 +26,7 @@ export const SpaceBetween = ({
       style={{
         flexWrap: wrap ? 'wrap' : 'nowrap',
         flexDirection: direction === 'horizontal' ? 'row' : 'column',
-        alignItems: 'center',
+        alignItems: align,
         gap,
         ...style,
       }}

packages/desktop-client/src/components/budget/goals/BudgetAutomation.tsx

@@ -71,6 +71,7 @@ export const BudgetAutomation = ({
   return (
     <SpaceBetween
       direction="vertical"
+      align="stretch"
       gap={inline ? 0 : 5}
       style={{ ...style, minHeight: 'fit-content' }}
     >

packages/desktop-client/src/components/budget/goals/BudgetAutomationEditor.tsx

@@ -124,6 +124,7 @@ export function BudgetAutomationEditor({
   return (
     <SpaceBetween
       direction="vertical"
+      align="stretch"
       gap={10}
       style={{
         flex: 1,

packages/desktop-client/src/components/budget/goals/editor/PercentageAutomation.tsx

@@ -33,7 +33,7 @@ export const PercentageAutomation = ({
 
   return (
     <>
-      <SpaceBetween gap={50} style={{ marginTop: 10, alignItems: 'center' }}>
+      <SpaceBetween gap={50} style={{ marginTop: 10 }}>
         <FormField style={{ flex: 1 }}>
           <FormLabel title={t('Category')} htmlFor="category-field" />
           <CategoryAutocomplete
@@ -71,7 +71,7 @@ export const PercentageAutomation = ({
           />
         </FormField>
       </SpaceBetween>
-      <SpaceBetween gap={50} style={{ marginTop: 10, alignItems: 'center' }}>
+      <SpaceBetween gap={50}>
         <FormField style={{ flex: 1 }}>
           <FormLabel title={t('Percentage of')} htmlFor="previous-field" />
           <Select

packages/desktop-client/src/components/budget/goals/editor/ScheduleAutomation.tsx

@@ -28,7 +28,7 @@ export const ScheduleAutomation = ({
   const { t } = useTranslation();
 
   return schedules.length ? (
-    <SpaceBetween gap={50} style={{ marginTop: 10, alignItems: 'center' }}>
+    <SpaceBetween gap={50} style={{ marginTop: 10 }}>
       <FormField style={{ flex: 1 }}>
         <FormLabel title={t('Schedule')} htmlFor="schedule-field" />
         <Select

packages/desktop-client/src/components/modals/BudgetAutomationsModal.tsx

@@ -87,6 +87,8 @@ function BudgetAutomationList({
     <SpaceBetween
       direction="vertical"
       gap={20}
+      align="stretch"
+      wrap={false}
       style={{
         overflowY: 'scroll',
         ...style,
@@ -222,7 +224,12 @@ export function BudgetAutomationsModal({ categoryId }: { categoryId: string }) {
       }}
     >
       {({ state: { close } }) => (
-        <SpaceBetween direction="vertical" style={{ height: '100%' }}>
+        <SpaceBetween
+          direction="vertical"
+          wrap={false}
+          align="stretch"
+          style={{ height: '100%' }}
+        >
           <ModalHeader
             title={t('Budget automations: {{category}}', {
               category: currentCategory?.name,
@@ -244,7 +251,7 @@ export function BudgetAutomationsModal({ categoryId }: { categoryId: string }) {
               <AnimatedLoading style={{ width: 20, height: 20 }} />
             </View>
           ) : (
-            <SpaceBetween direction="vertical">
+            <SpaceBetween align="stretch" direction="vertical">
               {needsMigration && (
                 <BudgetAutomationMigrationWarning categoryId={categoryId} />
               )}
@@ -266,7 +273,7 @@ export function BudgetAutomationsModal({ categoryId }: { categoryId: string }) {
             style={{
               marginTop: 20,
               justifyContent: 'flex-end',
-              alignItems: 'center',
+              flexShrink: 0,
             }}
           >
             {!needsMigration && (

upcoming-release-notes/6086.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [jfdoming]
+---
+
+Fix style issues after Stack migration