From b0bfded57eec1ce0b1e140a03a0660b18140276e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 25 May 2023 16:44:18 +0800
Subject: [PATCH] Better handling of overflow on long label names, hide
 Subscriptions if user does not have any

---
 .../templates/homeFeed/LibraryFilterMenu.tsx    | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 2b38a4826..7ec7b6cfd 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -155,6 +155,10 @@ function Subscriptions(props: LibraryFilterMenuProps): JSX.Element {
     [subscriptions]
   )
 
+  if (subscriptions.length < 1) {
+    return <></>
+  }
+
   return (
     <MenuPanel
       title="Subscriptions"
@@ -374,6 +378,8 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
         color: '$thTextSubtle',
         verticalAlign: 'middle',
         borderRadius: '3px',
+        cursor: 'pointer',
+
         m: '0px',
         '&:hover': {
           backgroundColor: '$thBackground4',
@@ -382,7 +388,16 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
       alignment="center"
       distribution="start"
     >
-      <label htmlFor={labelId} style={{ width: '100%' }}>
+      <label
+        htmlFor={labelId}
+        style={{
+          width: '100%',
+          maxWidth: '170px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
         <Circle size={9} color={props.label.color} weight="fill" />
         <SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
       </label>