domferr / domferr/tilingshell

Indicator icon has larger padding/bubble compared to other panel indicators

Open
#537 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2k
Forks
116
PR merge metrics
No merged PRs in 30d

Description

## Problem

The Tiling Shell indicator in the top bar has a noticeably larger "bubble" (padding area) compared to other system indicators (like volume, network, battery, etc.). This is especially visible when using monospaced fonts like JetBrains Mono, where spacing inconsistencies become more apparent.

## Root Cause Analysis

After investigating the code, I found that the indicator icon is created in `indicator/indicator.js`:

```javascript
const icon = new St.Icon({
gicon: Gio.icon_new_for_string(`${path}/icons/indicator-symbolic.svg`),
styleClass: "system-status-icon indicator-icon"
});
```

The issue is that this icon **does not have any explicit padding or size constraints** set in the JavaScript code. Meanwhile, the GNOME Shell default theme (or user themes like Yaru) applies different padding values to `.system-status-icon` elements:

```css
#panel .panel-button .system-status-icon {
icon-size: 1.091em;
padding: 0 6px;
margin: 0 4px;
}
```

Other panel buttons/indicators have their padding controlled by `-natural-hpadding` and `-minimum-hpadding` on the `.panel-button` element, but the Tiling Shell indicator seems to accumulate extra visual space — possibly because:

1. The indicator is added via `Main.panel.addToStatusArea(uuid, this, 1, "right")` as a `PanelMenu.Button`, which may have different default spacing than standard status indicators.
2. The combination of `system-status-icon` class styling + the PanelMenu.Button wrapper creates a larger visual "bubble" than other indicators.

## Visual Impact

- Tiling Shell indicator appears significantly larger/wider than neighboring indicators
- Inconsistent visual rhythm in the top bar status area
- Especially jarring with monospaced fonts where uniform spacing is more noticeable

## Suggested Solutions

### Option 1: Add a CSS class for consistent sizing (easiest for users)
Document in the README that users can override the indicator size with a custom shell theme or `~/.config/gtk-4.0/gtk.css`.

### Option 2: Set explicit padding in the indicator JS (recommended)
Add explicit padding to the icon or the PanelMenu.Button to match other indicators:

```javascript
// In indicator/indicator.js constructor
const icon = new St.Icon({
gicon: Gio.icon_new_for_string(`${path}/icons/indicator-symbolic.svg`),
styleClass: "system-status-icon indicator-icon",
style: "padding: 0;"
});
```

Or add a style class to the button itself:

```javascript
super(0.5, "Tiling Shell Indicator", false);
this.add_style_class_name("tilingshell-indicator");
```

This would allow users to target it specifically in their shell theme CSS.

### Option 3: Add a settings option
Add a toggle in preferences: "Use compact indicator size" that users can enable to reduce the bubble size.

## Environment

- GNOME Shell 46
- Ubuntu 24.04
- Tiling Shell 17.0
- Font: JetBrainsMono Nerd Font 12

## Workaround (current)

Users can create a custom shell theme with:

```css
#panel .panel-button .indicator-icon {
padding: 0 !important;
margin: 0 !important;
}
```

However, this requires the User Themes extension and knowledge of CSS overrides.

Thanks for the great extension! 🙏

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.