feat: fix spacing issues

changelog.md

@@ -9,6 +9,7 @@
   - Improvements to link hitboxes & more links in general
   - Permanent toast notifications can be automatically closed now
   - Remove tracking parameter `&si=...` from links in the share menu
+  - Fix spacing issues throughout the site
   - Added an easter egg to the watermark and config menu option :)
 - Changes & Fixes:
   - Now the lyrics button will directly link to the lyrics (using my API [geniURL](https://github.com/Sv443/geniURL))

src/config.ts

@@ -23,6 +23,7 @@ export const migrations: ConfigMigrationsDict = {
     ...oldData,
     removeShareTrackingParam: true,
     numKeysSkipToTime: true,
+    fixSpacing: true,
     logLevel: 1,
   }),
 };

src/features/index.ts

@@ -82,6 +82,12 @@ export const featInfo = {
     category: "layout",
     default: true,
   },
+  fixSpacing: {
+    desc: "Fix spacing issues in the layout",
+    type: "toggle",
+    category: "layout",
+    default: true,
+  },
 
   //#SECTION input
   arrowKeySupport: {

src/features/layout.ts

@@ -115,7 +115,7 @@ function exchangeLogo() {
   });
 }
 
-/** Called whenever the menu exists to add a BYTM-Configuration button to the user menu popover */
+/** Called whenever the avatar popover menu exists to add a BYTM-Configuration button to the user menu popover */
 export async function addConfigMenuOption(container: HTMLElement) {
   const cfgOptElem = document.createElement("div");
   cfgOptElem.role = "button";
@@ -464,7 +464,7 @@ export function addAnchorImprovements() {
     const addListItemAnchors = (items: NodeListOf<HTMLElement>) => {
       for(const item of items) {
         if(item.classList.contains("bytm-anchor-improved"))
-          return;
+          continue;
 
         item.classList.add("bytm-anchor-improved");
 
@@ -472,7 +472,7 @@ export function addAnchorImprovements() {
         const titleElem = item.querySelector<HTMLAnchorElement>(".title-column .title a");
 
         if(!thumbnailElem || !titleElem)
-          return;
+          continue;
 
         const anchorElem = document.createElement("a");
         anchorElem.classList.add("bytm-anchor", "bytm-carousel-shelf-anchor");
@@ -638,3 +638,20 @@ export function removeShareTrackingParam() {
     },
   });
 }
+
+//#MARKER fix margins
+
+export function fixSpacing() {
+  addGlobalStyle(`\
+ytmusic-carousel-shelf-renderer ytmusic-carousel ytmusic-responsive-list-item-renderer {
+  margin-bottom: var(--ytmusic-carousel-item-margin-bottom, 16px) !important;
+}
+
+ytmusic-carousel-shelf-renderer ytmusic-carousel {
+  --ytmusic-carousel-item-height: 60px !important;
+}
+
+/*ytmusic-carousel-shelf-renderer ytmusic-carousel ytmusic-responsive-list-item-renderer:nth-child(3n) {
+  margin-bottom: 0 !important;
+}*/`);
+}

src/index.ts

@@ -8,7 +8,7 @@ import {
   initQueueButtons, addWatermark,
   preInitLayout, removeUpgradeTab,
   initVolumeFeatures, initAutoCloseToasts,
-  removeShareTrackingParam,
+  removeShareTrackingParam, fixSpacing,
   // lyrics
   addMediaCtrlLyricsBtn, geniUrlBase,
   // input
@@ -145,6 +145,9 @@ async function onDomLoad() {
       if(features.numKeysSkipToTime)
         initNumKeysSkip();
 
+      if(features.fixSpacing)
+        fixSpacing();
+
       initVolumeFeatures();
     }
 

src/types.ts

@@ -45,6 +45,8 @@ export interface FeatureConfig {
   removeShareTrackingParam: boolean;
   /** Enable skipping to a specific time in the video by pressing a number key (0-9) */
   numKeysSkipToTime: boolean;
+  /** Fix spacing issues in the layout */
+  fixMargins: boolean;
 
   //#SECTION lyrics
   /** Add a button to the media controls to open the current song's lyrics on genius.com in a new tab */