extensionPrefs: Don't fill view

Extension rows contain both name/description and controls to
open preferences and enable/disable the extension. Those
elements become disassociated when the row expands too much
horizontally, so instead of filling the entire view, switch
to the embedded list style[0].

[0] https://developer.gnome.org/hig/stable/lists.html.en

https://gitlab.gnome.org/GNOME/gnome-shell/issues/1968

js/extensionPrefs/main.js

@@ -524,6 +524,7 @@ class ExtensionRow extends Gtk.ListBoxRow {
         let desc = this._extension.metadata.description.split('\n')[0];
         label = new DescriptionLabel({ label: desc, wrap: true, lines: 2,
                                        ellipsize: Pango.EllipsizeMode.END,
+                                       max_width_chars: 60,
                                        xalign: 0, yalign: 0 });
         vbox.add(label);
 

js/extensionPrefs/ui/extensions-window.ui

@@ -32,9 +32,20 @@
               <object class="GtkViewport">
                 <property name="visible">True</property>
                 <child>
-                  <object class="GtkListBox" id="extensionsList">
+                  <object class="GtkBox">
                     <property name="visible">True</property>
-                    <property name="selection_mode">none</property>
+                    <property name="orientation">vertical</property>
+                    <property name="halign">center</property>
+                    <property name="margin">36</property>
+                    <child>
+                      <object class="GtkListBox" id="extensionsList">
+                        <property name="visible">True</property>
+                        <property name="selection_mode">none</property>
+                        <style>
+                          <class name="frame"/>
+                        </style>
+                      </object>
+                    </child>
                   </object>
                 </child>
               </object>