#expand sidebar to top of viewport
1 messages · Page 1 of 1 (latest)
@slow surge mayhaps set the margin-top to calc(var(--custom-app-top-bar-height) * -1) and padding-top to calc(var(--space-xs) * 2)
also appears this snippet breaks when a banner is shown https://shit.post.in/4AdGeDv.png
Vencord.Api.Notices.showNotice("test") if you want a reliable example
o are those vars usually available in discord or provided by vencord?
wasnt aware of those
(tbh i wanted a quick hack, the css snippet above is my naive solution i came up with in like half a minute, so there's def room for improvement)
pretty sure, also working on another version that changes the grid layout
id futureproof it by using attribute selectors but i cba right now
feel free to copy into the main message, id appreciate a lil credit but u2u
thank you king
this broke for me is anyone willing to fix it?
@slow surge fixed (and double fixed) for latest update, shouldnt break again unless discord does some moving of shit around ```css
/* Force sidebar to be full height /
.visual-refresh {
& [class^="sidebarList__"], [class^="notice__"] { / remove weird top-left corner /
border-top-left-radius: 0px!important;
border-top: 0px!important;
}
& [class^=".notice__"] {
border-left: 0px!important;
border-bottom: 1px solid var(--app-border-frame);
}
& [class^="tutorialContainer__"] {
padding-top: calc(var(--space-xs) * 2); / fix lack of padding on server container */
}
& [class^="base__"] {
grid-template-rows: [top] min-content [titleBarEnd] min-content [noticeEnd] 1fr [end];
grid-template-areas: "notice notice notice"
"guildsList channelsList titleBar"
"guildsList channelsList page";
& > [class^="bar_"] { padding-left: 0px; }
}
}
old ones are both broken
@slow surge @rain cairn @cyan fern another update for the latest class scheme ```css
/* Force sidebar to be full height /
[class="-sidebarList"], [class*="-notice"] { /* remove weird top-left corner /
border-top-left-radius: 0px;
border-top: 0px;
}
[class="-sidebarList"] [class*="-header"] {
border-start-start-radius: 0px;
}
[class*="-notice"] {
border-left: 0px;
border-bottom: 1px solid var(--app-border-frame);
}
[class*="-tutorialContainer"] {
padding-top: calc(var(--space-xs) * 2); /* fix lack of padding on server container */
}
[class*="-base"] {
grid-template-rows: [top] min-content [titleBarEnd] min-content [noticeEnd] 1fr [end];
grid-template-areas: "notice notice notice"
"guildsList channelsList titleBar"
"guildsList channelsList page";
& > [class*="-bar"] { padding-left: 0px; }
}
Nice
broken by latest update again ;w;