Fix issues layout (#10498)

* Fix collapsed issue title

Signed-off-by: Artem Savchenko <armisav@gmail.com>

* Fix issues layout

Signed-off-by: Artem Savchenko <armisav@gmail.com>

---------

Signed-off-by: Artem Savchenko <armisav@gmail.com>

models/tracker/src/viewlets.ts

@@ -116,7 +116,9 @@ export function issueConfig (
       key: '',
       label: tracker.string.Title,
       presenter: tracker.component.TitlePresenter,
-      props: compact ? { shouldUseMargin: true, showParent: false } : {},
+      props: compact
+        ? { shouldUseMargin: true, showParent: false, grow: true, minWidth: '5rem' }
+        : { grow: true, minWidth: '5rem' },
       displayProps: { key: key + 'title' }
     },
     {
@@ -150,7 +152,8 @@ export function issueConfig (
             props: {
               kind: 'list',
               size: 'small',
-              shouldShowPlaceholder: false
+              shouldShowPlaceholder: false,
+              maxWidth: '30rem'
             },
             displayProps: {
               key: key + 'milestone',
@@ -169,7 +172,8 @@ export function issueConfig (
             props: {
               kind: 'list',
               size: 'small',
-              shouldShowPlaceholder: false
+              shouldShowPlaceholder: false,
+              maxWidth: '30rem'
             },
             displayProps: {
               key: key + 'component',
@@ -425,7 +429,8 @@ export function defineViewlets (builder: Builder): void {
           props: {
             kind: 'list',
             size: 'small',
-            shouldShowPlaceholder: false
+            shouldShowPlaceholder: false,
+            maxWidth: '30rem'
           },
           displayProps: { key: 'component', compression: true }
         },
@@ -436,7 +441,8 @@ export function defineViewlets (builder: Builder): void {
           props: {
             kind: 'list',
             size: 'small',
-            shouldShowPlaceholder: false
+            shouldShowPlaceholder: false,
+            maxWidth: '30rem'
           },
           displayProps: { key: 'milestone', compression: true }
         },

plugins/tracker-resources/src/components/components/ComponentEditor.svelte

@@ -35,6 +35,7 @@
   export let shape: ButtonShape = undefined
   export let justify: 'left' | 'center' = 'left'
   export let width: string | undefined = '100%'
+  export let maxWidth: string | undefined = undefined
   // export let onlyIcon: boolean = false
   export let isAction: boolean = false
   export let groupBy: string | undefined = undefined
@@ -109,7 +110,7 @@
 
 {#if kind === 'list'}
   {#if !Array.isArray(value) && value.component}
-    <div bind:this={element} class={compression ? 'label-wrapper' : 'clear-mins'}>
+    <div bind:this={element} class={compression ? 'label-wrapper' : 'clear-mins'} style:max-width={maxWidth}>
       <ComponentSelector
         {kind}
         {size}
@@ -135,6 +136,7 @@
     class="flex flex-wrap clear-mins"
     class:minus-margin={kind === 'list-header'}
     class:label-wrapper={compression}
+    style:max-width={maxWidth}
     style:flex-direction={twoRows ? 'column' : 'row'}
   >
     {#if (!Array.isArray(value) && value.component && value.component !== $activeComponent && groupBy !== 'component') || shouldShowPlaceholder}

plugins/tracker-resources/src/components/issues/TitlePresenter.svelte

@@ -22,10 +22,12 @@
   export let value: WithLookup<Issue>
   export let shouldUseMargin: boolean = false
   export let showParent: boolean = true
+  export let grow: boolean = false
   export let kind: 'list' | undefined = undefined
   export let onClick: (() => void) | undefined = undefined
   export let disabled: boolean = false
   export let maxWidth: string | undefined = undefined
+  export let minWidth: string | undefined = '1rem'
 </script>
 
 {#if value}
@@ -34,6 +36,8 @@
     class:with-margin={shouldUseMargin}
     class:list={kind === 'list'}
     style:max-width={maxWidth}
+    style:min-width={minWidth}
+    class:flex-grow={grow}
     title={value.title}
   >
     <DocNavLink object={value} {onClick} component={tracker.component.EditIssue} shrink={1} {disabled} colorInherit>
@@ -52,7 +56,11 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 1;
-    min-width: 1rem;
+
+    &.flex-grow {
+      flex-shrink: 0.5;
+      flex-grow: 1;
+    }
   }
 
   .with-margin {

plugins/tracker-resources/src/components/milestones/MilestoneEditor.svelte

@@ -41,6 +41,7 @@
   export let shape: ButtonShape = undefined
   export let justify: 'left' | 'center' = 'left'
   export let width: string | undefined = '100%'
+  export let maxWidth: string | undefined = undefined
   export let onlyIcon: boolean = false
   export let isAction: boolean = false
 
@@ -93,7 +94,7 @@
 
 {#if kind === 'list'}
   {#if !Array.isArray(value) && value.milestone}
-    <div bind:this={element} class={compression ? 'label-wrapper' : 'clear-mins'}>
+    <div bind:this={element} class={compression ? 'label-wrapper' : 'clear-mins'} style:max-width={maxWidth}>
       <MilestoneSelector
         {kind}
         {size}
@@ -117,6 +118,7 @@
   <div
     bind:this={element}
     class="flex flex-wrap clear-mins"
+    style:max-width={maxWidth}
     class:minus-margin={kind === 'list-header'}
     class:label-wrapper={compression}
     style:flex-direction={twoRows ? 'column' : 'row'}

services/billing/pod-billing/.gitignore

@@ -0,0 +1 @@
+.env