From 785b156f951d03f824c2df561776bcfee4d6acea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Thu, 24 Mar 2022 09:43:07 -0700
Subject: [PATCH] Fixes overflow for long calendar names (#2261)

- Adds title attribute for overflowed text

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/components/DestinationCalendarSelector.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/DestinationCalendarSelector.tsx b/apps/web/components/DestinationCalendarSelector.tsx
index 7d829bdb..fb515ea9 100644
--- a/apps/web/components/DestinationCalendarSelector.tsx
+++ b/apps/web/components/DestinationCalendarSelector.tsx
@@ -53,11 +53,14 @@ const DestinationCalendarSelector = ({
       })),
     })) ?? [];
   return (
-    <div className="relative">
+    <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
       {/* There's no easy way to customize the displayed value for a Select, so we fake it. */}
       {!hidePlaceholder && (
-        <div className="pointer-events-none absolute z-10">
-          <Button size="sm" color="secondary" className="m-[1px] rounded-sm border-transparent">
+        <div className="pointer-events-none absolute z-10 w-full">
+          <Button
+            size="sm"
+            color="secondary"
+            className="m-[1px] w-[calc(100%_-_40px)] overflow-hidden overflow-ellipsis whitespace-nowrap rounded-sm border-none leading-5">
             {t("select_destination_calendar")}: {selectedOption?.label || ""}
           </Button>
         </div>