Add settings option for vertical panel width

Author: Slion

DEVELOPMENT.md

@@ -0,0 +1,59 @@
+# Development Notes
+
+## Applying changes without logout (GNOME 46 Wayland)
+
+On GNOME 46 Wayland, `gnome-extensions disable/enable` does **not** reload
+extension JS — GNOME Shell caches ESM modules for the lifetime of the process.
+
+**`prefs.js` changes** take effect immediately — the prefs dialog runs in a
+separate process and is freshly spawned each time.
+
+**All other JS changes** (`panel.js`, `appIcons.js`, `taskbar.js`, etc.) require
+a shell restart to clear the module cache.
+
+### Restarting the shell without logging out
+
+Use **Looking Glass** (`Alt+F2` → type `lg` → Enter), go to the **Console** tab,
+and run:
+
+```js
+Meta.restart("Restarting...", global.context)
+```
+
+This restarts the GNOME Shell process in-place. Wayland clients (apps) survive and
+reconnect; the shell reloads all extension JS from disk.
+
+> Note: `Alt+F2 → r` (the classic X11 shortcut) is **disabled** on Wayland.
+> `Meta.restart()` with two arguments is required on GNOME 46+.
+
+### Looking Glass inspector
+
+Looking Glass also has an **Inspector** (pick-icon in the toolbar): click it, then
+click any shell actor on screen to inspect its properties, style, children, and
+allocation in real time. Useful for diagnosing layout/centering issues without
+adding `log()` calls.
+
+## Clutter BoxLayout: x_expand vs x_align
+
+When a child of `St.BoxLayout` / `Clutter.BoxLayout` has `x_expand: true`, the
+layout gives it a larger **slot** (natural size + extra space). However, `x_align`
+controls how the child uses that slot:
+
+- `x_align = START` / `CENTER` / `END`: actor uses only its **natural width** within
+  the slot, positioned accordingly. Extra space is wasted. ClutterText inside will
+  ellipsize at its natural width even though the slot is bigger.
+- `x_align = FILL`: actor **fills the entire slot**. ClutterText gets the full width
+  and only ellipsizes when text genuinely doesn't fit.
+
+So for a label that should fill available horizontal space, always pair
+`x_expand: true` with `x_align: Clutter.ActorAlign.FILL`. The text inside will
+still render left-to-right (left-aligned) naturally.
+
+### Evaluating JS against live shell objects
+
+```js
+// Get the DTP panel actor
+Main.layoutManager.panelBox
+// Inspect an actor's allocation
+let a = Main.panel._leftBox; a.get_allocation_box()
+```

schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml

@@ -110,6 +110,11 @@
       <summary>Panel size (Deprecated)</summary>
       <description>Set the size of the panel.</description>
     </key>
+    <key type="i" name="panel-vertical-width">
+      <default>0</default>
+      <summary>Vertical panel width override</summary>
+      <description>Override total panel width when in vertical (left/right) mode. 0 = automatic (panel-size + label width).</description>
+    </key>
     <key type="b" name="desktop-line-use-custom-color">
       <default>false</default>
       <summary>Override Show Desktop line color</summary>

src/appIcons.js

@@ -164,10 +164,12 @@ export const TaskbarAppIcon = GObject.registerClass(
       this._container = new St.Widget({
         style_class: 'dtp-container',
         layout_manager: new Clutter.BinLayout(),
+        x_expand: true,
       })
       this._dotsContainer = new St.Widget({
         style_class: 'dtp-dots-container',
         layout_manager: new Clutter.BinLayout(),
+        x_expand: true,
       })
       this._dtpIconContainer = new St.Widget({
         layout_manager: new Clutter.BinLayout(),
@@ -180,11 +182,12 @@ export const TaskbarAppIcon = GObject.registerClass(
       this._dtpIconContainer.add_child(this._iconContainer)
 
       if (appInfo.window) {
-        let box = Utils.createBoxLayout()
+        let box = Utils.createBoxLayout({ x_expand: true })
 
         this._windowTitle = new St.Label({
           y_align: Clutter.ActorAlign.CENTER,
-          x_align: Clutter.ActorAlign.START,
+          x_align: Clutter.ActorAlign.FILL,
+          x_expand: true,
           style_class: 'overview-label',
         })
 
@@ -751,7 +754,7 @@ export const TaskbarAppIcon = GObject.registerClass(
             'font-weight: ' +
             fontWeight +
             ';' +
-            (useFixedWidth ? '' : 'max-width: ' + maxLabelWidth + 'px;') +
+            (useFixedWidth || this.dtpPanel.geom.vertical ? '' : 'max-width: ' + maxLabelWidth + 'px;') +
             'color: ' +
             fontColor,
         )

src/panel.js

@@ -683,7 +683,7 @@ export const Panel = GObject.registerClass(
       if (isVertical) {
         this._signalsHandler.add([
           SETTINGS,
-          'changed::group-apps-label-max-width',
+          ['changed::group-apps-label-max-width', 'changed::panel-vertical-width'],
           () => this._resetGeometry(),
         ])
       }
@@ -822,6 +822,10 @@ export const Panel = GObject.registerClass(
         this.fixedCoord = { c1: 'x1', c2: 'x2' }
         this.varCoord = { c1: 'y1', c2: 'y2' }
 
+        const panelVerticalWidth = SETTINGS.get_int('panel-vertical-width')
+        if (panelVerticalWidth > 0) {
+          innerSize = outerSize = panelVerticalWidth * scaleFactor
+        }
         w = innerSize
         h = this.monitor.height * length - topBottomMargins - gsTopPanelHeight
         dockMode = !!dynamic || topBottomMargins > 0 || h < this.monitor.height
@@ -1142,10 +1146,10 @@ export const Panel = GObject.registerClass(
 
         // add existing theme padding to dtp panel margins
         this.panelBox.set_style(
-          `padding: 
-              ${this.geom.topOffset + topBottomMargins + padding[St.Side.TOP]}px 
-              ${sideMargins + padding[St.Side.RIGHT]}px 
-              ${topBottomMargins + padding[St.Side.BOTTOM]}px 
+          `padding:
+              ${this.geom.topOffset + topBottomMargins + padding[St.Side.TOP]}px
+              ${sideMargins + padding[St.Side.RIGHT]}px
+              ${topBottomMargins + padding[St.Side.BOTTOM]}px
               ${sideMargins + padding[St.Side.LEFT]}px;`,
         )
       }

src/prefs.js

@@ -3346,6 +3346,11 @@ const Preferences = class {
         },
       },
       panelLengthScale,
+      {
+        objectName: 'panel_vertical_width_scale',
+        valueName: 'panel-vertical-width',
+        range: [800, 0],
+      },
       {
         objectName: 'tray_size_scale',
         valueName: 'tray-size',

ui/SettingsStyle.ui

@@ -3,6 +3,12 @@
   <!-- interface-name SettingsStyle.ui -->
   <requires lib="gtk" version="4.0"/>
   <requires lib="libadwaita" version="1.6"/>
+  <object class="GtkAdjustment" id="panel_vertical_width_adjustment">
+    <property name="lower">0</property>
+    <property name="upper">800</property>
+    <property name="step-increment">1</property>
+    <property name="page-increment">10</property>
+  </object>
   <object class="GtkAdjustment" id="appicon_margin_adjustment">
     <property name="lower">0.33</property>
     <property name="page-increment">0.1</property>
@@ -286,6 +292,22 @@
     <child>
       <object class="AdwPreferencesGroup" id="style_group_dynamic_trans">
         <property name="title" translatable="yes">Panel style</property>
+        <child>
+          <object class="AdwActionRow" id="panel_vertical_width_row">
+            <property name="subtitle" translatable="yes">(vertical mode only, 0 = auto)</property>
+            <property name="title" translatable="yes">Vertical panel width</property>
+            <child>
+              <object class="GtkScale" id="panel_vertical_width_scale">
+                <property name="adjustment">panel_vertical_width_adjustment</property>
+                <property name="digits">0</property>
+                <property name="draw-value">True</property>
+                <property name="round-digits">0</property>
+                <property name="value-pos">right</property>
+                <property name="width-request">300</property>
+              </object>
+            </child>
+          </object>
+        </child>
         <child>
           <object class="AdwActionRow">
             <property name="subtitle" translatable="yes">(default is 0)</property>