[gnome-software/1284-gs-summary-tile-define-minimum-width-for-better-display: 4/4] gs-summary-tile: Enhance display of the tile

[Milan Crha <mcrha src gnome org>]

commit 5ad5abef9b323ee73ce79395ae8113b8540b6c0f
Author: Milan Crha <mcrha redhat com>
Date:   Tue Jun 22 19:21:20 2021 +0200

    gs-summary-tile: Enhance display of the tile
    
    * define minimum width, to not ellipsize the text too early
    * change packing, to be able to vertically center the text in the tile
    
    Closes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1284

 src/gs-summary-tile.ui | 63 ++++++++++++++++++++++++++------------------------
 src/gtk-style-hc.css   |  5 ++++
 src/gtk-style.css      |  1 +
 3 files changed, 39 insertions(+), 30 deletions(-)
---
diff --git a/src/gs-summary-tile.ui b/src/gs-summary-tile.ui
index 6f1b39c0c..5d130013e 100644
--- a/src/gs-summary-tile.ui
+++ b/src/gs-summary-tile.ui
@@ -74,44 +74,47 @@
                     <property name="left-attach">0</property>
                     <property name="top-attach">0</property>
                     <property name="width">1</property>
-                    <property name="height">3</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="name">
-                    <property name="visible">True</property>
-                    <property name="ellipsize">end</property>
-                    <property name="xalign">0.0</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                    </attributes>
-                    <style>
-                      <class name="app-tile-label"/>
-                    </style>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">0</property>
-                    <property name="width">1</property>
                     <property name="height">1</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkLabel" id="summary">
+                  <object class="GtkBox" id="box">
                     <property name="visible">True</property>
-                    <property name="ellipsize">end</property>
-                    <property name="xalign">0.0</property>
-                    <property name="yalign">0.0</property>
-                    <property name="lines">2</property>
-                    <property name="vexpand">True</property>
-                    <property name="single-line-mode">True</property>
-                    <style>
-                      <class name="app-tile-label"/>
-                    </style>
+                    <property name="valign">center</property>
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">6</property>
+                    <child>
+                      <object class="GtkLabel" id="name">
+                        <property name="visible">True</property>
+                        <property name="ellipsize">end</property>
+                        <property name="xalign">0.0</property>
+                        <attributes>
+                          <attribute name="weight" value="bold"/>
+                        </attributes>
+                        <style>
+                          <class name="app-tile-label"/>
+                        </style>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="summary">
+                        <property name="visible">True</property>
+                        <property name="ellipsize">end</property>
+                        <property name="xalign">0.0</property>
+                        <property name="yalign">0.0</property>
+                        <property name="lines">2</property>
+                        <property name="vexpand">True</property>
+                        <property name="single-line-mode">True</property>
+                        <property name="wrap">True</property>
+                        <style>
+                          <class name="app-tile-label"/>
+                        </style>
+                      </object>
+                    </child>
                   </object>
                   <packing>
                     <property name="left-attach">1</property>
-                    <property name="top-attach">2</property>
+                    <property name="top-attach">0</property>
                     <property name="width">1</property>
                     <property name="height">1</property>
                   </packing>
diff --git a/src/gtk-style-hc.css b/src/gtk-style-hc.css
index 95c773fec..b3e9ce6d3 100644
--- a/src/gtk-style-hc.css
+++ b/src/gtk-style-hc.css
@@ -81,6 +81,11 @@ screenshot-carousel button {
        padding: 2px 10px;
 }
 
+summary-tile {
+       border-radius: 6px;
+       min-width: 280px;
+}
+
 .view.tile {
        padding: 0;
        background-image: none;
diff --git a/src/gtk-style.css b/src/gtk-style.css
index ab1378007..641bac64b 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -250,6 +250,7 @@ screenshot-carousel button {
 
 summary-tile {
        border-radius: 6px;
+       min-width: 280px;
 }
 
 .view.tile {