Moving the top right panel icons


In gnome shell there are some system icons in the top right corner (keyboard layout, wifi, volume, battery charge) when you click on them, you get a little system menu.
I need to move them.

I have a secondary display input that always displays as a square in the top right corner of the screen. Therefore I can not reach the system icons or see what I am clicking.

So far the only “solution” I came up with is making a wide empty extension and stuffing it before the system icons which forces them to move to the left.
This is not optimal though because the menu opens to the right and is partially obscured by the secondary input square.

How can I move these icons to some other location on the panel better?
I could not find any configuration file for the default system icons where I could change their location.

This is my weird wide extension:

import GObject from 'gi://GObject';
import St from 'gi://St';

import {Extension, gettext as _} from 'resource:///org/gnome/shell/extensions/extension.js';
import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js';
import * as PopupMenu from 'resource:///org/gnome/shell/ui/popupMenu.js';

import * as Main from 'resource:///org/gnome/shell/ui/main.js';

const Indicator = GObject.registerClass(
class Indicator extends PanelMenu.Button {
    _init() {
        super._init(0.0, _('Separator'));

        this.add_child(new St.BoxLayout({
            style_class: 'sep-box',

export default class IndicatorExampleExtension extends Extension {
    enable() {
        this._indicator = new Indicator();
        Main.panel.addToStatusArea(this.uuid, this._indicator, 10);

    disable() {
        this._indicator = null;

And the styles for it that set the width:

.sep-box {
    color: black;
    width: 1350px;

Is there a way I can:

  1. Move the system icons to the middle of the panel without the weird extension? Or.
  2. Move them to the left of the panel? Or.
  3. Make the system menu display to the left instead of right?