Add ChannelListWidth

ChannelListWidth/README.md

@@ -0,0 +1,31 @@
+# Channel List Width
+![Status: working](https://img.shields.io/badge/status-working-green?style=flat-square)
+
+Improved custom channel list width and header height, with fixes for server banners and user panel.
+
+- Banners stretch/shrink correctly to fit any channel list width and header height.
+- User panel buttons reposition above user info when channel list is narrow, and spread out when channel list is wide.
+
+| 600px                                    | 240px                                      |
+| ---------------------------------------- | ------------------------------------------ |
+| ![600px channel list](preview-wide.avif) | ![240px channel list](preview-narrow.avif) |
+
+## Usage
+### Custom / Quick CSS
+Paste the following at the start:
+```css
+@import url("https://minidiscordthemes.github.io/Snippets/ChannelListWidth/main.css");
+```
+### Vencord Themes
+```
+https://minidiscordthemes.github.io/Snippets/ChannelListWidth/main.css
+```
+
+## Customisation
+Paste the following at the end of Custom / Quick CSS, then edit the values:
+```css
+:root {
+    --channellist-width: 240px;
+    --channellist-header-height: 48px;
+}
+```

ChannelListWidth/scss/_default.scss

@@ -0,0 +1,4 @@
+:root {
+    --channellist-width: 240px;
+    --channellist-header-height: 48px;
+}

ChannelListWidth/scss/_vars.scss

@@ -0,0 +1,7 @@
+$default-banner-height: 135;
+$default-banner-width: 240;
+
+$channellist-width: var(--channellist-width);
+$channellist-header-height: var(--channellist-header-height);
+
+$banner-height: calc($channellist-width / $default-banner-width * $default-banner-height);

ChannelListWidth/scss/main.scss

@@ -0,0 +1,83 @@
+@use "./vars" as *;
+@use "./default";
+
+// Channels list
+.sidebar_e031be {
+    width: $channellist-width;
+
+    // Server name header
+    .headerContent__6fcc7 {
+        height: calc($channellist-header-height - 24px);
+    }
+
+    // Banner
+    .animatedContainer__0e828 {
+        height: $banner-height;
+    }
+
+    // Prevent banner overlapping outer
+    .animatedContainer__0e828,
+    .bannerImage_c73a57 {
+        transform: none !important;
+        min-height: $channellist-header-height;
+    }
+    .bannerImage_c73a57,
+    .bannerImg_fe5c1b {
+        width: inherit;
+    }
+    .bannerImg_fe5c1b {
+        height: unset;
+        min-height: $channellist-header-height;
+    }
+
+    // Resize banner-channels spacers in servers with banners
+    &:has(.animatedContainer__0e828) {
+        // Servers with boost goal
+        &:has(.container_bc43c1) {
+            div[style="height: 12px;"] {
+                height: calc($banner-height - $channellist-header-height) !important;
+            }
+            div[style="height: 84px;"] {
+                height: 0 !important;
+            }
+        }
+
+        // Servers without boost goal
+        & {
+            div[style="height: 12px;"] {
+                height: calc($banner-height - $channellist-header-height - 84px) !important;
+            }
+            div[style="height: 84px;"] {
+                height: calc($banner-height - $channellist-header-height) !important;
+            }
+        }
+    }
+
+    // Flexier user panel
+    .container_debb33 {
+        box-sizing: border-box;
+        min-height: 53px;
+        height: auto;
+        padding: 4px 8px 6px;
+        row-gap: 5px;
+        column-gap: 8px;
+        flex-wrap: wrap-reverse;
+        justify-content: center;
+
+        .avatarWrapper__500a6 {
+            flex: 2;
+            max-width: fit-content;
+            margin-right: 0;
+        }
+
+        .horizontal__4848b {
+            flex: 1 !important;
+            justify-content: space-around;
+        }
+    }
+
+    // DM list fix
+    .channel__0aef5 {
+        max-width: unset;
+    }
+}