Fix flex shrink

traPtitech · Apr 17, 2024 · 40ebcdf · 40ebcdf
1 parent bac4e8c
commit 40ebcdf
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/dashboard/src/components/UI/Badge.tsx b/dashboard/src/components/UI/Badge.tsx
@@ -6,6 +6,7 @@ const Badge = styled('div', {
     height: '1.43em', // 20px
     padding: '0 8px',
     borderRadius: '9999px',
+    whiteSpace: 'nowrap',
 
     ...textVars.caption.regular,
   },

diff --git a/dashboard/src/components/templates/List.tsx b/dashboard/src/components/templates/List.tsx
@@ -57,7 +57,7 @@ const RowTitle = styled('h3', {
 })
 const RowData = styled('div', {
   base: {
-    width: 'auto',
+    width: '100%',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

diff --git a/dashboard/src/components/templates/app/AppDeployInfo.tsx b/dashboard/src/components/templates/app/AppDeployInfo.tsx
@@ -148,12 +148,18 @@ const DeployInfo = styled('div', {
 })
 
 const halfFit = style({
-  width: '50%',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
 })
 
+const shrinkFirst = style({
+  flexShrink: 0,
+  flexGrow: 1,
+  flexBasis: 0,
+  minWidth: 0,
+})
+
 const DataRows = styled('div', {
   base: {
     display: 'flex',
@@ -253,7 +259,7 @@ const AppDeployInfo: Component<{
           <JumpButton href={`/apps/${props.app.id}/settings/build`} />
         </DeployInfo>
         <DeployInfo long>
-          <List.RowContent>
+          <List.RowContent class={shrinkFirst}>
             <List.RowTitle>Source Commit</List.RowTitle>
             <List.RowData>
               {deployedCommitDisplay()}