Float Pin icon to Right

[rjmoggach]

What would you like to be added?

Float the little pin icon on the right side of the frame instead of indenting to the left so as not to change/move the expected UI.

Why is this needed?

Currently interrupts vertical columnar rhythm when there are custom icons or emojis on folders/files.

[rjmoggach]

this rudimentary hack is visually ok:

.pin-icon {
    position: fixed;
    right: 5px !important;
}

[kelszo]

This is a good idea, I will investigate it and most likely implement it

[mmshivesh]

Managed to make it look and function as if it was built into Obsidian with the following custom css snippet:

Alternative 1

.pin-icon {
    display: none;
    position: fixed;
    right: 20px !important;
}

.file-explorer-plus.pin-icon {
    margin-top: 0px;
    rotate: 0deg;
    color: var(--text-faint);
}

.tree-item-self:hover > .pin-icon {
    display: block;
}

Benefits:

1. Very unobtrusive UI, shows up only when hovering
2. Uses the inbuilt --text-faint color, reducing visual clutter
3. Includes benefits of @rjmoggach's approach by having a clean Explorer view

Alternative 2: Subtle animation

Tweaking the visibility on the pin lets me get a very subtle animation on the pin as well which makes it look super polished (can be made more subtle if necessary):

.pin-icon {
    visibility: hidden;
    position: fixed;
    right: 20px !important;
}

.tree-item-self > .pin-icon {
    margin-top: -7px;
    visibility: hidden;
    rotate: 0deg;
    transition: visibility 0s, margin-top 0.1s ease-out;
    color: var(--text-faint);
}

.tree-item-self:hover > .pin-icon {
    visibility: visible;
    margin-top: 0;
}

[kelszo]

Thank you for the suggestion @mmshivesh, however I feel like this defeats the UX purpose of pinning. It is meant to be clear that the file is pinned, as is common in other applications. However I will keep this issue open in case others wish to use your CSS snippet.