From 8b6c1376509b11be407491831d033d31acb1b706 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 17 Oct 2024 16:55:57 +0200
Subject: [PATCH 1/2] correct selected color, align options

---
 .../inspector/controls/advanced-grid-modal.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/inspector/controls/advanced-grid-modal.tsx b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
index ec8fb4cb4abb..463dd8ff574e 100644
--- a/editor/src/components/inspector/controls/advanced-grid-modal.tsx
+++ b/editor/src/components/inspector/controls/advanced-grid-modal.tsx
@@ -14,7 +14,7 @@ import {
   separatorRadixSelectOption,
 } from '../../../uuiui/radix-components'
 import { optionalMap } from '../../../core/shared/optional-utils'
-import type { FlexAlignment } from 'utopia-api/core'
+import { FlexAlignment } from 'utopia-api/core'
 import { FlexJustifyContent } from 'utopia-api/core'
 import { GridAutoColsOrRowsControlInner } from '../grid-auto-cols-or-rows-control'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
@@ -79,12 +79,18 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
     [alignItemsLayoutInfo],
   )
 
-  const contentOptions = [
+  const justifyOptions = [
     unsetSelectOption,
     separatorRadixSelectOption(),
     ...Object.values(FlexJustifyContent).map(selectOption),
   ]
 
+  const alignOptions = [
+    unsetSelectOption,
+    separatorRadixSelectOption(),
+    ...Object.values(FlexAlignment).map(selectOption),
+  ]
+
   const onSubmitJustifyContent = React.useCallback(
     (value: string) => {
       if (value === 'unset') {
@@ -187,7 +193,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
           <RadixSelect
             id='grid.justifyContent'
             value={currentJustifyContentValue ?? unsetSelectOption}
-            options={contentOptions}
+            options={justifyOptions}
             onValueChange={onSubmitJustifyContent}
             contentClassName={`ignore-react-onclickoutside-${props.id}`}
             contentStyle={{
@@ -205,7 +211,7 @@ export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
           <RadixSelect
             id='grid.alignContent'
             value={currentAlignContentValue ?? unsetSelectOption}
-            options={contentOptions}
+            options={alignOptions}
             onValueChange={onSubmitAlignContent}
             contentClassName={`ignore-react-onclickoutside-${props.id}`}
             contentStyle={{
@@ -301,11 +307,11 @@ const justifyItemsOptions = itemsOptions('justify')
 const alignItemsOptions = itemsOptions('align')
 const rowVariant: GridRowVariant = '|--67px--|<--------1fr-------->'
 
-function selectOption(value: FlexJustifyContent) {
+function selectOption(value: FlexJustifyContent | FlexAlignment) {
   return regularRadixSelectOption({
     label: value.replace('-', ' '),
     value: value,
-    placeholder: true,
+    placeholder: false,
   })
 }
 

From 82c94237943ab4209b07c6687551e5f226d2d1ee Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 17 Oct 2024 17:08:04 +0200
Subject: [PATCH 2/2] update enum

---
 utopia-api/src/layout/flex.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/utopia-api/src/layout/flex.ts b/utopia-api/src/layout/flex.ts
index 23a2a0df37a6..5e89bc423da2 100644
--- a/utopia-api/src/layout/flex.ts
+++ b/utopia-api/src/layout/flex.ts
@@ -215,6 +215,7 @@ export enum FlexJustifyContent {
   SpaceAround = 'space-around',
   SpaceBetween = 'space-between',
   SpaceEvenly = 'space-evenly',
+  Stretch = 'stretch',
 }
 
 export const AllFlexJustifyContents: Array<FlexJustifyContent> = [
@@ -224,6 +225,7 @@ export const AllFlexJustifyContents: Array<FlexJustifyContent> = [
   FlexJustifyContent.SpaceAround,
   FlexJustifyContent.SpaceBetween,
   FlexJustifyContent.SpaceEvenly,
+  FlexJustifyContent.Stretch,
 ]
 
 export enum FlexDirection {