BetterFolders: Add className to Sidebar component

src/plugins/betterFolders/FolderSideBar.tsx

@@ -43,15 +43,13 @@ export default ErrorBoundary.wrap(guildsBarProps => {
 
     // We need to display none if we are in fullscreen. Yes this seems horrible doing with css, but it's literally how Discord does it.
     // Also display flex otherwise to fix scrolling.
-    // gridArea is needed to align properly with the base app grid.
-    const barStyle = {
-        display: isFullscreen ? "none" : "flex",
-        gridArea: "betterFoldersSidebar"
+    const sidebarStyle = {
+        display: isFullscreen ? "none" : "flex"
     } satisfies CSSProperties;
 
     if (!guilds || !settings.store.sidebarAnim) {
         return visible
-            ? <div style={barStyle}>{Sidebar}</div>
+            ? <div className="vc-betterFolders-sidebar" style={sidebarStyle}>{Sidebar}</div>
             : null;
     }
 
@@ -65,7 +63,7 @@ export default ErrorBoundary.wrap(guildsBarProps => {
         >
             {(animationStyle: any, show: any) =>
                 show && (
-                    <Animations.animated.div style={{ ...animationStyle, ...barStyle }}>
+                    <Animations.animated.div className="vc-betterFolders-sidebar" style={{ ...animationStyle, ...sidebarStyle }}>
                         {Sidebar}
                     </Animations.animated.div>
                 )

src/plugins/betterFolders/index.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import "./sidebarFix.css";
+import "./style.css";
 
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";

src/plugins/betterFolders/style.css

@@ -1,5 +1,8 @@
-/* These area names need to be hardcoded. Only betterFoldersSidebar is added by the plugin. */
+.vc-betterFolders-sidebar {
+    grid-area: betterFoldersSidebar
+}
 
+/* These area names need to be hardcoded. Only betterFoldersSidebar is added by the plugin. */
 .visual-refresh .vc-betterFolders-sidebar-grid {
     /* stylelint-disable-next-line value-keyword-case */
     grid-template-columns: [start] min-content [guildsEnd] min-content [sidebarEnd] min-content [channelsEnd] 1fr [end];