[gnome-software/1852-source-popover-is-very-wide: 2/2] gs-origin-popover-row: Show the pills on a separate line

[Milan Crha <mcrha src gnome org>]

commit 358edffcf4259648172179f8a43e4df6b84613e5
Author: Milan Crha <mcrha redhat com>
Date:   Mon Aug 15 17:48:57 2022 +0200

    gs-origin-popover-row: Show the pills on a separate line
    
    This makes the popover not so wide.
    
    Closes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1852

 src/gs-origin-popover-row.ui | 258 +++++++++++++++++++++++--------------------
 src/style.css                |   2 +-
 2 files changed, 140 insertions(+), 120 deletions(-)
---
diff --git a/src/gs-origin-popover-row.ui b/src/gs-origin-popover-row.ui
index eff9a2c11..f1fac6504 100644
--- a/src/gs-origin-popover-row.ui
+++ b/src/gs-origin-popover-row.ui
@@ -5,130 +5,147 @@
       <object class="GtkBox">
         <property name="orientation">horizontal</property>
         <child>
-          <object class="GtkBox" id="vbox">
+          <object class="GtkBox" id="row_vbox">
             <property name="orientation">vertical</property>
-            <property name="spacing">3</property>
+            <property name="spacing">6</property>
             <child>
-              <object class="GtkLabel" id="name_label">
-                <property name="halign">start</property>
-                <property name="ellipsize">end</property>
-                <attributes>
-                  <attribute name="weight" value="bold"/>
-                </attributes>
+              <object class="GtkBox" id="top_hbox">
+                <property name="orientation">horizontal</property>
+                <property name="spacing">6</property>
+                <child>
+                  <object class="GtkBox" id="vbox">
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">0</property>
+                    <child>
+                      <object class="GtkLabel" id="name_label">
+                        <property name="halign">start</property>
+                        <property name="ellipsize">end</property>
+                        <attributes>
+                          <attribute name="weight" value="bold"/>
+                        </attributes>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="info_label">
+                        <property name="halign">start</property>
+                        <property name="ellipsize">end</property>
+                        <style>
+                          <class name="app-row-origin-text"/>
+                          <class name="dim-label"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkImage" id="installed_image">
+                    <property name="visible">False</property>
+                    <property name="pixel_size">16</property>
+                    <property name="icon_name">app-installed-symbolic</property>
+                    <property name="margin-start">6</property>
+                    <property name="valign">center</property>
+                    <style>
+                      <class name="success"/>
+                    </style>
+                  </object>
+                </child>
               </object>
             </child>
             <child>
-              <object class="GtkLabel" id="info_label">
-                <property name="halign">start</property>
-                <property name="ellipsize">end</property>
-                <style>
-                  <class name="app-row-origin-text"/>
-                  <class name="dim-label"/>
-                </style>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkImage" id="installed_image">
-            <property name="visible">False</property>
-            <property name="pixel_size">16</property>
-            <property name="icon_name">app-installed-symbolic</property>
-            <property name="margin-start">6</property>
-            <property name="valign">center</property>
-            <style>
-              <class name="success"/>
-            </style>
-          </object>
-        </child>
-        <child>
-          <object class="GtkBox" id="packaging_box">
-            <property name="orientation">horizontal</property>
-            <property name="spacing">4</property>
-            <property name="margin-start">6</property>
-            <property name="valign">center</property>
-            <style>
-              <class name="origin-rounded-box"/>
-            </style>
-            <child>
-              <object class="GtkImage" id="packaging_image">
-                <property name="pixel_size">16</property>
-                <property name="icon_name">package-x-generic-symbolic</property>
-                <property name="valign">center</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkLabel" id="packaging_label">
-                <property name="halign">start</property>
-                <property name="ellipsize">none</property>
-                <property name="margin-top">1</property>
-                <property name="margin-end">2</property>
-                <attributes>
-                  <attribute name="weight" value="bold"/>
-                  <attribute name="variant" value="all-small-caps"/>
-                </attributes>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkBox" id="beta_box">
-            <property name="orientation">horizontal</property>
-            <property name="spacing">4</property>
-            <property name="valign">center</property>
-            <style>
-              <class name="origin-rounded-box"/>
-              <class name="origin-beta"/>
-            </style>
-            <child>
-              <object class="GtkImage" id="beta_image">
-                <property name="pixel_size">16</property>
-                <property name="icon_name">test-symbolic</property>
-                <property name="valign">center</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkLabel" id="beta_label">
-                <property name="halign">start</property>
-                <property name="ellipsize">none</property>
-                <property name="label" translatable="yes" comments="Translators: It's like a beta version of 
the software, a test version">Beta</property>
-                <property name="margin-top">1</property>
-                <property name="margin-end">2</property>
-                <attributes>
-                  <attribute name="weight" value="bold"/>
-                  <attribute name="variant" value="all-small-caps"/>
-                </attributes>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkBox" id="user_scope_box">
-            <property name="orientation">horizontal</property>
-            <property name="spacing">4</property>
-            <property name="valign">center</property>
-            <style>
-              <class name="origin-rounded-box"/>
-              <class name="origin-scope-user"/>
-            </style>
-            <child>
-              <object class="GtkImage" id="user_scope_image">
-                <property name="pixel_size">16</property>
-                <property name="icon_name">avatar-default-symbolic</property>
-                <property name="valign">center</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkLabel" id="user_scope_label">
-                <property name="halign">start</property>
-                <property name="ellipsize">none</property>
-                <property name="label" translatable="yes" comments="Translators: It's an origin scope, 
'User' or 'System' installation">User</property>
-                <property name="margin-top">1</property>
-                <property name="margin-end">2</property>
-                <attributes>
-                  <attribute name="weight" value="bold"/>
-                  <attribute name="variant" value="all-small-caps"/>
-                </attributes>
+              <object class="GtkBox" id="bottom_hbox">
+                <property name="orientation">horizontal</property>
+                <property name="spacing">6</property>
+                <child>
+                  <object class="GtkBox" id="packaging_box">
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">4</property>
+                    <property name="valign">center</property>
+                    <style>
+                      <class name="origin-rounded-box"/>
+                    </style>
+                    <child>
+                      <object class="GtkImage" id="packaging_image">
+                        <property name="pixel_size">16</property>
+                        <property name="icon_name">package-x-generic-symbolic</property>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="packaging_label">
+                        <property name="halign">start</property>
+                        <property name="ellipsize">none</property>
+                        <property name="margin-top">1</property>
+                        <property name="margin-end">2</property>
+                        <attributes>
+                          <attribute name="weight" value="bold"/>
+                          <attribute name="variant" value="all-small-caps"/>
+                        </attributes>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkBox" id="beta_box">
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">4</property>
+                    <property name="valign">center</property>
+                    <style>
+                      <class name="origin-rounded-box"/>
+                      <class name="origin-beta"/>
+                    </style>
+                    <child>
+                      <object class="GtkImage" id="beta_image">
+                        <property name="pixel_size">16</property>
+                        <property name="icon_name">test-symbolic</property>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="beta_label">
+                        <property name="halign">start</property>
+                        <property name="ellipsize">none</property>
+                        <property name="label" translatable="yes" comments="Translators: It's like a beta 
version of the software, a test version">Beta</property>
+                        <property name="margin-top">1</property>
+                        <property name="margin-end">2</property>
+                        <attributes>
+                          <attribute name="weight" value="bold"/>
+                          <attribute name="variant" value="all-small-caps"/>
+                        </attributes>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkBox" id="user_scope_box">
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">4</property>
+                    <property name="valign">center</property>
+                    <style>
+                      <class name="origin-rounded-box"/>
+                      <class name="origin-scope-user"/>
+                    </style>
+                    <child>
+                      <object class="GtkImage" id="user_scope_image">
+                        <property name="pixel_size">16</property>
+                        <property name="icon_name">avatar-default-symbolic</property>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="user_scope_label">
+                        <property name="halign">start</property>
+                        <property name="ellipsize">none</property>
+                        <property name="label" translatable="yes" comments="Translators: It's an origin 
scope, 'User' or 'System' installation">User</property>
+                        <property name="margin-top">1</property>
+                        <property name="margin-end">2</property>
+                        <attributes>
+                          <attribute name="weight" value="bold"/>
+                          <attribute name="variant" value="all-small-caps"/>
+                        </attributes>
+                      </object>
+                    </child>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
@@ -136,6 +153,9 @@
         <child>
           <object class="GtkImage" id="selected_image">
             <property name="visible">False</property>
+            <property name="margin-start">18</property>
+            <property name="halign">end</property>
+            <property name="hexpand">True</property>
             <property name="pixel_size">16</property>
             <property name="icon_name">object-select-symbolic</property>
           </object>
diff --git a/src/style.css b/src/style.css
index 4f1d84e0a..efa3fd85e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -36,7 +36,7 @@ screenshot-carousel button,
 
 .origin-rounded-box {
        border-radius: 14px;
-       padding: 4px 8px;
+       padding: 4px 4px;
 }
 
 .origin-beta {