option for wider tabs

src/plugins/channelTabs/components/BookmarkContainer.tsx

@@ -217,7 +217,7 @@ function Bookmark(props: BookmarkProps) {
 
     return (
         <div
-            className={cl("bookmark", "hoverable")}
+            className={cl("bookmark", "hoverable", { wider: settings.store.widerTabsAndBookmarks })}
             ref={ref}
             onClick={e => isBookmarkFolder(bookmark)
                 ? ContextMenuApi.openContextMenu(e, () => <BookmarkFolderOpenMenu {...props} />)

src/plugins/channelTabs/components/ChannelTab.tsx

@@ -244,7 +244,7 @@ export default function ChannelTab(props: ChannelTabsProps & { index: number; })
     drag(drop(ref));
 
     return <div
-        className={cl("tab", { "tab-compact": compact, "tab-selected": isTabSelected(id) })}
+        className={cl("tab", { "tab-compact": compact, "tab-selected": isTabSelected(id), wider: settings.store.widerTabsAndBookmarks })}
         key={index}
         ref={ref}
         onAuxClick={e => {

src/plugins/channelTabs/components/ChannelTabsContainer.tsx

@@ -33,7 +33,7 @@ const cl = classNameFactory("vc-channeltabs-");
 
 export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
     const [userId, setUserId] = useState("");
-    const { showBookmarkBar } = settings.use(["showBookmarkBar"]);
+    const { showBookmarkBar, widerTabsAndBookmarks } = settings.use(["showBookmarkBar", "widerTabsAndBookmarks"]);
     const GhostTabs = useGhostTabs();
 
     const _update = useForceUpdater();
@@ -74,6 +74,10 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
         (Vencord.Plugins.plugins.ChannelTabs as any).containerHeight = ref.current?.clientHeight;
     }, [userId, showBookmarkBar]);
 
+    useEffect(() => {
+        _update();
+    }, [widerTabsAndBookmarks]);
+
     if (!userId) return null;
     handleChannelSwitch(props);
     saveTabs(userId);

src/plugins/channelTabs/style.css

@@ -108,6 +108,10 @@
     border-radius: 0.25rem;
 }
 
+.vc-channeltabs-bookmark.vc-channeltabs-wider {
+    max-width: 12rem;
+}
+
 .vc-channeltabs-bookmark .vc-channeltabs-name-text {
     margin-left: 0.25rem;
     margin-right: 0.25rem;
@@ -142,6 +146,10 @@
     margin-right: 0.25rem;
 }
 
+.vc-channeltabs-tab.vc-channeltabs-wider:not(.vc-channeltabs-tab-compact) {
+    width: 16rem;
+}
+
 .vc-channeltabs-tab-compact {
     width: unset;
     min-width: unset;

src/plugins/channelTabs/util/constants.ts

@@ -65,6 +65,12 @@ export const settings = definePluginSettings({
         description: "Show notification dot for bookmarks",
         type: OptionType.BOOLEAN,
         default: true
+    },
+    widerTabsAndBookmarks: {
+        description: "Extend the length of tabs and bookmarks for larger monitors",
+        type: OptionType.BOOLEAN,
+        default: false,
+        restartNeeded: false
     }
 });