Make the CoachingSessionSelector component be more responsive on the coaching session page.

Author: jhodapp

src/app/coaching-sessions/[id]/page.tsx

@@ -151,7 +151,7 @@ export default function CoachingSessionsPage() {
             style={siteConfig.titleStyle}
             onRender={handleTitleRender}
           ></CoachingSessionTitle>
-          <div className="ml-auto flex w-[28rem] space-x-2 sm:justify-end">
+          <div className="ml-auto flex w-full sm:max-w-sm md:max-w-md space-x-2 sm:justify-end md:justify-start">
             <CoachingSessionSelector
               relationshipId={currentCoachingRelationshipId}
               disabled={!currentCoachingRelationshipId}

src/components/ui/coaching-session-selector.tsx

@@ -186,10 +186,10 @@ export default function CoachingSessionSelector({
 
   const displayValue = currentSession ? (
     <div className="flex flex-col w-full">
-      <span className="truncate overflow-hidden text-left">
+      <span className="truncate text-left">
         {currentGoal?.title || "No goal set"}
       </span>
-      <span className="text-sm text-gray-500 text-left truncate overflow-hidden">
+      <span className="text-sm text-gray-500 text-left truncate">
         {getDateTimeFromString(currentSession.date).toLocaleString(
           DateTime.DATETIME_FULL
         )}