Merge branch '13492-design-comments-width' into 'master'

Add styles for better comments and truncation image title

Closes #13492

See merge request gitlab-org/gitlab!17547

changelogs/unreleased/13492-design-comments-width.yml

+---
+title: Smaller width for design comments layout, truncate image title
+merge_request: 17547
+author:
+type: fixed

ee/app/assets/javascripts/design_management/components/toolbar/index.vue

@@ -87,22 +87,22 @@ export default {
 </script>
 
 <template>
-  <header class="d-flex w-100 p-2 bg-white align-items-center js-design-header">
+  <header class="d-flex p-2 bg-white align-items-center js-design-header">
     <router-link
       :to="{
         name: 'designs',
         query: $route.query,
       }"
       :aria-label="s__('DesignManagement|Go back to designs')"
-      class="mr-3 text-plain"
+      class="mr-3 text-plain d-flex justify-content-center align-items-center"
     >
       <icon :size="18" name="close" />
     </router-link>
-    <div>
-      <h2 class="m-0">{{ name }}</h2>
+    <div class="overflow-hidden d-flex align-items-center">
+      <h2 class="m-0 str-truncated-100">{{ name }}</h2>
       <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
     </div>
-    <pagination :id="id" class="ml-auto" />
+    <pagination :id="id" class="ml-auto flex-shrink-0" />
     <delete-button
       v-if="isLatestVersion && canDeleteDesign"
       :is-deleting="isDeleting"

ee/app/assets/javascripts/design_management/components/toolbar/pagination.vue

@@ -46,7 +46,7 @@ export default {
 <template>
   <div v-if="designsCount" class="d-flex align-items-center">
     {{ paginationText }}
-    <div class="btn-group ml-3">
+    <div class="btn-group ml-3 mr-3">
       <pagination-button
         :design="previousDesign"
         :title="s__('DesignManagement|Go to previous design')"

ee/app/assets/javascripts/design_management/pages/design/index.vue

@@ -192,10 +192,12 @@ export default {
 </script>
 
 <template>
-  <div class="design-detail fixed-top w-100 position-bottom-0 d-sm-flex justify-content-center">
+  <div
+    class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
+  >
     <gl-loading-icon v-if="isLoading" size="xl" class="align-self-center" />
     <template v-else>
-      <div class="d-flex flex-column w-100">
+      <div class="d-flex overflow-hidden flex-lg-grow-1 flex-column">
         <design-destroyer
           :filenames="[design.filename]"
           :project-path="projectPath"
@@ -215,7 +217,7 @@ export default {
             />
           </template>
         </design-destroyer>
-        <div class="d-flex flex-column w-100 h-100 mh-100 position-relative">
+        <div class="d-flex flex-column h-100 mh-100 position-relative">
           <design-image
             :image="design.image"
             :name="design.filename"

ee/app/assets/stylesheets/components/design_management/design.scss

@@ -2,10 +2,6 @@
   object-fit: contain;
 }
 
-.design-detail {
-  overflow-y: scroll;
-}
-
 .design-list-item .design-event {
   top: $gl-padding;
   right: $gl-padding;
@@ -22,7 +18,9 @@
   padding: 0 $gl-padding;
   padding-top: 50px;
   background-color: $white-light;
+  flex-shrink: 0;
   min-width: 400px;
+  flex-basis: 28%;
 
   li {
     list-style: none;
@@ -74,7 +72,7 @@
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, sm)) {
+@media (max-width: map-get($grid-breakpoints, lg)) {
   .design-detail {
     overflow-y: scroll;
   }
@@ -82,5 +80,7 @@
   .image-notes {
     overflow-y: auto;
     min-width: 100%;
+    flex-grow: 1;
+    flex-basis: auto;
   }
 }

ee/app/assets/stylesheets/pages/design_management.scss

@@ -7,7 +7,6 @@
 
   h2 {
     font-size: 14px;
-    line-height: 1;
   }
 }
 

ee/spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap

@@ -2,11 +2,11 @@
 
 exports[`Design management toolbar component renders design and updated data 1`] = `
 <header
-  class="d-flex w-100 p-2 bg-white align-items-center js-design-header"
+  class="d-flex p-2 bg-white align-items-center js-design-header"
 >
   <a
     aria-label="Go back to designs"
-    class="mr-3 text-plain"
+    class="mr-3 text-plain d-flex justify-content-center align-items-center"
   >
     <icon-stub
       name="close"
@@ -14,9 +14,11 @@ exports[`Design management toolbar component renders design and updated data 1`]
     />
   </a>
    
-  <div>
+  <div
+    class="overflow-hidden d-flex align-items-center"
+  >
     <h2
-      class="m-0"
+      class="m-0 str-truncated-100"
     >
       test.jpg
     </h2>
@@ -29,7 +31,7 @@ exports[`Design management toolbar component renders design and updated data 1`]
   </div>
    
   <pagination-stub
-    class="ml-auto"
+    class="ml-auto flex-shrink-0"
     id="1"
   />
    

ee/spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap

@@ -10,7 +10,7 @@ exports[`Design management pagination component renders pagination buttons 1`] =
   0 of 2
   
   <div
-    class="btn-group ml-3"
+    class="btn-group ml-3 mr-3"
   >
     <paginationbutton-stub
       class="js-previous-design"

ee/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Design management design index page renders design index 1`] = `
 <div
-  class="design-detail fixed-top w-100 position-bottom-0 d-sm-flex justify-content-center"
+  class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
 >
   <glloadingicon-stub
     class="align-self-center"
@@ -15,7 +15,7 @@ exports[`Design management design index page renders design index 1`] = `
 
 exports[`Design management design index page sets loading state 1`] = `
 <div
-  class="design-detail fixed-top w-100 position-bottom-0 d-sm-flex justify-content-center"
+  class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
 >
   <glloadingicon-stub
     class="align-self-center"