Padding issues of title-action and main-panel

[sleepymalc]

This is my current UI:

On the top-left, the activity-bar and the traffic-light are overlapping with each other. I would like to left-pad the activity-bar to avoid this.

A side note: somehow the activity-bar already gets some left-padding, and I don't know why. I would love to understand this as well.

In addition, when I tried to remove the title-action, I'll get the following:

Which is expected. To remove the empty space that the title-action originally occupied, I change the height in the setting to a smaller number, say 1:

    "apc.sidebar.titlebar": {
        "height": 35, // -> 1
    },

Which shifts the whole side-panel upwards, resulting in an additional empty space at the bottom (the red-rectangle):

Any idea how to fix the issues? My APC setting is quite minimalistic:

    "apc.electron": {
        "titleBarStyle": "hidden",
    },
    "apc.header": {
        "height": 38
    },
    "apc.activityBar": {
        "position": "bottom",
        "size": 40,
        "itemMargin": 0,
        "hideSettings": true
    },
    "apc.statusBar": {
        "position": "bottom",
        "height": 20,
        "fontSize": 13
    },
    "apc.sidebar.titlebar": {
        "height": 1,
    },
    "apc.stylesheet": {
        ".title-label": "display: none !important",
        ".title-actions": "display: none !important",
        ".quick-input-widget": {
            "position": "absolute !important",
            "top": "30% !important",
            "left": "50%",
            "border-radius": "10px",
            "border": "1px solid var(--vscode-textSeparator-foreground) !important",
            "box-shadow": "0 0 60px 0 rgba(0,0,0,0.2) !important"
        },
        ".split-view-view + .split-view-view.visible .tabs-container": "padding-left: 100px",
        ".split-view-view.visible + .split-view-view.visible .tabs-container": "padding-left: 0px",
    },

[rez1coder]

This should solve traffic light problem https://github.com/drcika/apc-extension?tab=readme-ov-file#inline-title-bar-with-traffic-light-position

I don't know about title. This may work. https://github.com/drcika/apc-extension?tab=readme-ov-file#frameless-title-bar

[sleepymalc]

@rez1coder I don't want to adjust the traffic light position; instead, I would like only to adjust the activity bar's position.

As for the title-action, I think you misunderstood the issue here. I'm referring to removing the following component (the top-left red rectangle):

By doing that (uncommenting the code in the red rectangle), it creates an empty spacing. To remove that empty spacing, I tried

    "apc.sidebar.titlebar": {
        "height": 1
    },

and unfortunately, this shifts the whole side-panel component upwards, resulting in an empty spacing at the bottom (see the third figure of the original post). I believe that frameless-title-bar is something different.

[rez1coder]

I see but there's no easy solution. You have to edit the css in apc.stylesheet heavily.

And you are using the apc.activityBar wrong.

"hideSettings": true is removed. See here

Changed code

    "apc.activityBar": {
        "position": "bottom",
        "size": 40,
        "itemMargin": 0,
    },

You set it to bottom but the activityBar is on top.

Maybe you are using vscode default setting "workbench.activityBar.location": "top",

[sleepymalc]

For the apc.activityBar, indeed I am using "workbench.activityBar.location": "top". This is not well-documented as in the README it says only bottom will take effect, but I want to place it on the top and also adjust the size and the margin so I just leave it there.

Indeed I didn't see visual difference when changing size, but when changing itemMargin there's some slight difference. So I guess it just doesn't work well when activity bar is on top.

[rez1coder]

This is not well-documented as in the README it says only bottom will take effect

For bottom or default position left, the settings will work. Top position removed means, it doesn't/won't work. You can remove the position setting.

[sleepymalc]

Okay. But after removing it I still can't figure out why it causes the shift of the activity bar to the right.

This is a bigger issue I would like to address first compared to removing the title-action. Any idea why this happens?

[rez1coder]

IMO, what you are requesting was tried before https://github.com/drcika/apc-extension/issues/5#issuecomment-1794828754, but no fix at this moment. Typically I would go for activityBar to bottom of sidebar, not top. That would solve everything.

[sleepymalc]

Sorry but not really. When I change to "workbench.activityBar.location": "bottom" and also

    "apc.activityBar": {
        "position": "bottom",
        "size": 40,
        "itemMargin": 0,
    },

I get the following shifted effect again:

I should point out that when I change to bottom, "window.customTitleBarVisibility": "never" disappears, and I'll need to manually add back to get rid of the title again.

I think this is the intended way to achieve this as documented here

[rez1coder]

IMO, what you are requesting was tried before #5 (comment), but no fix at this moment. Typically I would go for activityBar to bottom of sidebar, not top. That would solve everything.

Assuming you didn't hide the sidebar title and actions. Lol

You are going vim mode there. Just the explorer title won't hurt ;)

[sleepymalc]

Sorry I hardly understand what you're suggesting. Not hiding the sidebar title and actions doesn't really help with the shifted issue. Please see the following:

Here I commented out both ".title-label": "display: none !important" and ".title-actions": "display: none !important", and as the screenshot shows, the title (top left, Explorer...) and the sidebar icon (bottom left) are shifted to the right.

[rez1coder]

That's weird.

Comment out everything except this section and apc.activityBar. See if it works. You can move the sidebar to the right, too.

PS: Windows version is working as expected.

[sleepymalc]

The result after commenting out everything related to APC except apc.activityBar:

[sleepymalc]

I think such a problem happens in multiple places:

https://github.com/user-attachments/assets/55c1c2b2-44a9-4af8-b65c-909dbc3087b5

Basically, for the base panel, it gets some non-zero left-padding; as for the tabs, even if I set the left-padding to 0, it still gets some non-zero padding when I hide the side-panel.

[rez1coder]

@drcika Please, take a look at this.

[sleepymalc]

The issue seems to be the title. Please see the following:

https://github.com/user-attachments/assets/13050c7c-bf32-4345-a8aa-40810b19b353