From 2c7f04da41c9838fde891b33637736a95f72e8b3 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Tue, 16 Apr 2024 13:49:54 +0200
Subject: [PATCH 1/9] fix: Sidebar in start custom activity

Workaround to not hide too much behind the sidebar. The activity needs
some refactoring to work in all window sizes properly.
---
 .../ActivityLibrary/ActivityDetails/ActivityDetails.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
index dcafb56236f..aba0c83c911 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -144,7 +144,7 @@ const ActivityDetails = (props: Props) => {
           <ActivityDetailsSidebar
             selectedTemplateRef={activity}
             teamsRef={teams}
-            isOpen={!isEditing}
+            isOpen
             type={activity.type}
             preferredTeamId={preferredTeamId}
             viewerRef={viewer}

From 13a4d60ecc14ad0b165c303b11c0d32625f54cee Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Tue, 16 Apr 2024 16:49:27 +0200
Subject: [PATCH 2/9] Make activity details screen reactive

---
 .../ActivityDetails/ActivityDetails.tsx       | 24 ++++++++++---------
 .../ActivityDetails/TemplateDetails.tsx       |  2 +-
 .../components/IntegrationsTip.tsx            |  2 +-
 .../ActivityDetailsSidebar.tsx                |  3 +--
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
index aba0c83c911..0b40fa655f5 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -93,7 +93,7 @@ const ActivityDetails = (props: Props) => {
   const MOBILE_SETTINGS_HEIGHT = 208
 
   return (
-    <div className='flex h-full flex-col bg-white'>
+    <div className='flex h-full w-full flex-col bg-white'>
       <div className={clsx(`flex grow pb-[${MOBILE_SETTINGS_HEIGHT}px]`)}>
         <div className='mt-4 grow'>
           <div className='mb-14 ml-4 flex h-min w-max items-center'>
@@ -104,21 +104,23 @@ const ActivityDetails = (props: Props) => {
             </div>
             <div className='w-max text-xl font-semibold'>Start Activity</div>
           </div>
-          <div className='mx-auto w-min'>
+          <div className='mx-auto'>
             <div
               className={clsx(
-                'flex w-full flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14',
+                'flex flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14',
                 isEditing && 'lg:flex-row lg:justify-center lg:pl-14'
               )}
             >
-              <ActivityCard
-                className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
-                theme={CATEGORY_THEMES[category as CategoryID]}
-                badge={null}
-                type={type}
-              >
-                <ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
-              </ActivityCard>
+              <div>
+                <ActivityCard
+                  className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
+                  theme={CATEGORY_THEMES[category as CategoryID]}
+                  badge={null}
+                  type={type}
+                >
+                  <ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
+                </ActivityCard>
+              </div>
               <div className='pb-20'>
                 <div className='mb-10 space-y-2 pl-14'>
                   <div className='flex min-h-[40px] items-center'>
diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
index f45191fad8c..2f334d7b8ea 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
@@ -212,7 +212,7 @@ export const TemplateDetails = (props: Props) => {
   return (
     <div className='space-y-6'>
       <ActivityDetailsBadges isEditing={isEditing} templateRef={activity} />
-      <div className='w-[480px]'>
+      <div className='max-w-[480px]'>
         <div className='mb-6'>
           {__typename === 'FixedActivity' && (
             <div className='text-base font-semibold text-slate-600'>Created by Parabol</div>
diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx
index e0cec9c4116..27e33d76790 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx
@@ -15,7 +15,7 @@ export const IntegrationsTip = (props: Props) => {
   const {className, children} = props
 
   return (
-    <div className={clsx('flex min-w-max items-center', className)}>
+    <div className={clsx('flex items-center', className)}>
       <div className='flex items-center gap-3'>
         <JiraSVG />
         <GitHubSVG />
diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
index 880b12f59c0..27248f35b0f 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
@@ -253,10 +253,9 @@ const ActivityDetailsSidebar = (props: Props) => {
 
   return (
     <>
-      {isOpen && <div className='w-96' />}
       <div
         className={clsx(
-          'fixed bottom-0 flex  w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
+          'bottom-0 flex h-full w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
           isOpen ? 'translate-y-0' : 'translate-y-full lg:translate-x-0 lg:translate-y-0',
           isOpen ? 'opacity-100' : 'opacity-0 lg:opacity-100'
         )}

From f60aa72ccc4ddacfaf382a3646ed496d3c3a8cc3 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Tue, 16 Apr 2024 20:04:46 +0200
Subject: [PATCH 3/9] Fix editing view

---
 .../ActivityLibrary/ActivityDetails/ActivityDetails.tsx  | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
index 0b40fa655f5..a932a972013 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -105,12 +105,7 @@ const ActivityDetails = (props: Props) => {
             <div className='w-max text-xl font-semibold'>Start Activity</div>
           </div>
           <div className='mx-auto'>
-            <div
-              className={clsx(
-                'flex flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14',
-                isEditing && 'lg:flex-row lg:justify-center lg:pl-14'
-              )}
-            >
+            <div className='flex flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14'>
               <div>
                 <ActivityCard
                   className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
@@ -146,7 +141,7 @@ const ActivityDetails = (props: Props) => {
           <ActivityDetailsSidebar
             selectedTemplateRef={activity}
             teamsRef={teams}
-            isOpen
+            isOpen={!isEditing}
             type={activity.type}
             preferredTeamId={preferredTeamId}
             viewerRef={viewer}

From 354fce4ab51b956c5cb9681c5cfa198b01ec972f Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Thu, 18 Apr 2024 09:30:55 +0200
Subject: [PATCH 4/9] Remove z-index

---
 packages/client/components/ActivityLibrary/ActivityCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityCard.tsx b/packages/client/components/ActivityLibrary/ActivityCard.tsx
index 724e791960b..260013189a5 100644
--- a/packages/client/components/ActivityLibrary/ActivityCard.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityCard.tsx
@@ -38,7 +38,7 @@ export const ActivityCardImage = (props: PropsWithChildren<ActivityCardImageProp
     >
       <img className='object-contain' src={backgroundSrc} alt='' />
       <img
-        className='absolute top-0 left-0 z-10 h-full w-full object-contain p-10'
+        className='absolute top-0 left-0 h-full w-full object-contain p-10'
         src={src}
         alt='Card Illustration'
       />

From e317b04ba7b7e636c4e1f4d6de6c8110d145c1c9 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Thu, 18 Apr 2024 10:47:48 +0200
Subject: [PATCH 5/9] Make all content visible on mobile

---
 .../ActivityDetails/ActivityDetails.tsx       |   7 +-
 .../ActivityDetailsSidebar.tsx                | 139 +++++++++---------
 2 files changed, 71 insertions(+), 75 deletions(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
index a932a972013..d0919a8068d 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -1,5 +1,4 @@
 import graphql from 'babel-plugin-relay/macro'
-import clsx from 'clsx'
 import React, {useEffect, useState} from 'react'
 import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
 import {Redirect, useHistory} from 'react-router'
@@ -90,11 +89,10 @@ const ActivityDetails = (props: Props) => {
   }`
 
   const isOwner = viewerLowestScope === 'TEAM'
-  const MOBILE_SETTINGS_HEIGHT = 208
 
   return (
     <div className='flex h-full w-full flex-col bg-white'>
-      <div className={clsx(`flex grow pb-[${MOBILE_SETTINGS_HEIGHT}px]`)}>
+      <div className='flex grow'>
         <div className='mt-4 grow'>
           <div className='mb-14 ml-4 flex h-min w-max items-center'>
             <div className='mr-4'>
@@ -136,6 +134,7 @@ const ActivityDetails = (props: Props) => {
               </div>
             </div>
           </div>
+          <div className='h-48 lg:hidden' />
         </div>
         <div className='hidden lg:block'>
           <ActivityDetailsSidebar
@@ -148,7 +147,7 @@ const ActivityDetails = (props: Props) => {
           />
         </div>
       </div>
-      <div className={`fixed min-h-[${MOBILE_SETTINGS_HEIGHT}px] bottom-0 w-full lg:hidden`}>
+      <div className={`fixed bottom-0 w-full lg:hidden`}>
         <ActivityDetailsSidebar
           selectedTemplateRef={activity}
           teamsRef={teams}
diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
index 27248f35b0f..2c89599e9e1 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
@@ -252,83 +252,80 @@ const ActivityDetailsSidebar = (props: Props) => {
   const withRecurrence = type === 'teamPrompt' || type === 'retrospective'
 
   return (
-    <>
-      <div
-        className={clsx(
-          'bottom-0 flex h-full w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
-          isOpen ? 'translate-y-0' : 'translate-y-full lg:translate-x-0 lg:translate-y-0',
-          isOpen ? 'opacity-100' : 'opacity-0 lg:opacity-100'
-        )}
-      >
-        <div className='flex-grow'>
-          <div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
-            Settings
-            <span
-              className='hover:cursor-pointer lg:hidden'
-              onClick={() => setIsMinimized(!isMinimized)}
-            >
-              {isMinimized ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-            </span>
-          </div>
+    <div
+      className={clsx(
+        'bottom-0 flex h-full w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
+        isOpen ? 'translate-y-0' : 'translate-y-full lg:translate-x-0 lg:translate-y-0',
+        isOpen ? 'opacity-100' : 'opacity-0 lg:opacity-100'
+      )}
+    >
+      <div className='flex-grow'>
+        <div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
+          Settings
+          <span
+            className='hover:cursor-pointer lg:hidden'
+            onClick={() => setIsMinimized(!isMinimized)}
+          >
+            {isMinimized ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </span>
+        </div>
 
-          <div
-            className={clsx(
-              'transition-max-height duration-300 ease-in-out',
-              isMinimized
-                ? 'max-h-0 opacity-0 lg:max-h-[100vh] lg:opacity-100'
-                : 'max-h-[100vh] pb-4 lg:pb-0'
+        <div
+          className={clsx(
+            'transition-max-height duration-300 ease-in-out',
+            isMinimized
+              ? 'max-h-0 opacity-0 lg:max-h-[100vh] lg:opacity-100'
+              : 'max-h-[100vh] pb-4 lg:pb-0'
+          )}
+        >
+          <div className='mt-6 flex grow flex-col gap-2'>
+            <NewMeetingTeamPicker
+              positionOverride={isMobile ? MenuPosition.UPPER_RIGHT : MenuPosition.UPPER_LEFT} // refactor this: https://github.com/ParabolInc/parabol/issues/9274
+              onSelectTeam={onSelectTeam}
+              selectedTeamRef={selectedTeam}
+              teamsRef={availableTeams}
+              customPortal={teamScopePopover}
+              allowAddTeam={viewer.featureFlags.adHocTeams}
+            />
+            {type === 'retrospective' && (
+              <>
+                <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.retroSettings} />
+                <NewMeetingSettingsToggleTeamHealth
+                  settingsRef={selectedTeam.retroSettings}
+                  teamRef={selectedTeam}
+                />
+                <NewMeetingSettingsToggleAnonymity settingsRef={selectedTeam.retroSettings} />
+              </>
+            )}
+            {type === 'poker' && (
+              <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.pokerSettings} />
+            )}
+            {type === 'action' && (
+              <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.actionSettings} />
             )}
-          >
-            <div className='mt-6 flex grow flex-col gap-2'>
-              <NewMeetingTeamPicker
-                positionOverride={isMobile ? MenuPosition.UPPER_RIGHT : MenuPosition.UPPER_LEFT} // refactor this: https://github.com/ParabolInc/parabol/issues/9274
-                onSelectTeam={onSelectTeam}
-                selectedTeamRef={selectedTeam}
-                teamsRef={availableTeams}
-                customPortal={teamScopePopover}
-                allowAddTeam={viewer.featureFlags.adHocTeams}
-              />
-              {type === 'retrospective' && (
-                <>
-                  <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.retroSettings} />
-                  <NewMeetingSettingsToggleTeamHealth
-                    settingsRef={selectedTeam.retroSettings}
-                    teamRef={selectedTeam}
-                  />
-                  <NewMeetingSettingsToggleAnonymity settingsRef={selectedTeam.retroSettings} />
-                </>
-              )}
-              {type === 'poker' && (
-                <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.pokerSettings} />
-              )}
-              {type === 'action' && (
-                <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.actionSettings} />
-              )}
-            </div>
           </div>
         </div>
+      </div>
 
-        <div className='z-10 flex h-fit w-full flex-col gap-2 pb-4'>
-          {error && <StyledError>{error.message}</StyledError>}
-          <NewMeetingActionsCurrentMeetings team={selectedTeam} />
-          {/* TODO: scheduling meeting does not work with one-on-one https://github.com/ParabolInc/parabol/issues/8820  */}
-          <ScheduleMeetingButton
-            handleStartActivity={handleStartActivity}
-            mutationProps={mutationProps}
-            teamRef={selectedTeam}
-            placeholder={meetingNamePlaceholder}
-            withRecurrence={withRecurrence}
-          />
-          <FlatPrimaryButton
-            onClick={() => handleStartActivity()}
-            waiting={submitting}
-            className='h-14'
-          >
-            <div className='text-lg'>Start Activity</div>
-          </FlatPrimaryButton>
-        </div>
+      <div className='z-10 flex h-fit w-full flex-col gap-2 pb-4'>
+        {error && <StyledError>{error.message}</StyledError>}
+        <NewMeetingActionsCurrentMeetings team={selectedTeam} />
+        <ScheduleMeetingButton
+          handleStartActivity={handleStartActivity}
+          mutationProps={mutationProps}
+          teamRef={selectedTeam}
+          placeholder={meetingNamePlaceholder}
+          withRecurrence={withRecurrence}
+        />
+        <FlatPrimaryButton
+          onClick={() => handleStartActivity()}
+          waiting={submitting}
+          className='h-14'
+        >
+          <div className='text-lg'>Start Activity</div>
+        </FlatPrimaryButton>
       </div>
-    </>
+    </div>
   )
 }
 

From f1eab033fe7473ada8ffc76541aaf62010f37cd4 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Thu, 18 Apr 2024 12:20:12 +0200
Subject: [PATCH 6/9] Mobile adaptions

---
 .../ActivityDetails/ActivityDetails.tsx       |   7 +-
 .../ActivityDetailsSidebar.tsx                | 135 +++++++++---------
 2 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
index d0919a8068d..36d65a7b639 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -1,4 +1,5 @@
 import graphql from 'babel-plugin-relay/macro'
+import clsx from 'clsx'
 import React, {useEffect, useState} from 'react'
 import {PreloadedQuery, usePreloadedQuery} from 'react-relay'
 import {Redirect, useHistory} from 'react-router'
@@ -134,24 +135,22 @@ const ActivityDetails = (props: Props) => {
               </div>
             </div>
           </div>
-          <div className='h-48 lg:hidden' />
+          {!isEditing && <div className='h-48 lg:hidden' />}
         </div>
         <div className='hidden lg:block'>
           <ActivityDetailsSidebar
             selectedTemplateRef={activity}
             teamsRef={teams}
-            isOpen={!isEditing}
             type={activity.type}
             preferredTeamId={preferredTeamId}
             viewerRef={viewer}
           />
         </div>
       </div>
-      <div className={`fixed bottom-0 w-full lg:hidden`}>
+      <div className={clsx('fixed bottom-0 w-full lg:hidden', isEditing && 'hidden')}>
         <ActivityDetailsSidebar
           selectedTemplateRef={activity}
           teamsRef={teams}
-          isOpen={!isEditing}
           type={activity.type}
           preferredTeamId={preferredTeamId}
           viewerRef={viewer}
diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
index 2c89599e9e1..4d735ea0fe1 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
@@ -40,13 +40,12 @@ interface Props {
   selectedTemplateRef: ActivityDetailsSidebar_template$key
   teamsRef: ActivityDetailsSidebar_teams$key
   type: MeetingTypeEnum
-  isOpen: boolean
   preferredTeamId: string | null
   viewerRef: ActivityDetailsSidebar_viewer$key
 }
 
 const ActivityDetailsSidebar = (props: Props) => {
-  const {selectedTemplateRef, teamsRef, type, isOpen, preferredTeamId, viewerRef} = props
+  const {selectedTemplateRef, teamsRef, type, preferredTeamId, viewerRef} = props
   const [isMinimized, setIsMinimized] = useState(false)
   const isMobile = !useBreakpoint(Breakpoint.INVOICE)
   const selectedTemplate = useFragment(
@@ -252,80 +251,76 @@ const ActivityDetailsSidebar = (props: Props) => {
   const withRecurrence = type === 'teamPrompt' || type === 'retrospective'
 
   return (
-    <div
-      className={clsx(
-        'bottom-0 flex h-full w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
-        isOpen ? 'translate-y-0' : 'translate-y-full lg:translate-x-0 lg:translate-y-0',
-        isOpen ? 'opacity-100' : 'opacity-0 lg:opacity-100'
-      )}
-    >
-      <div className='flex-grow'>
-        <div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
-          Settings
-          <span
-            className='hover:cursor-pointer lg:hidden'
-            onClick={() => setIsMinimized(!isMinimized)}
-          >
-            {isMinimized ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
-          </span>
-        </div>
+    <>
+      <div className='bottom-0 flex w-full flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:sticky lg:right-0 lg:top-0 lg:min-h-screen lg:w-96 lg:border-l lg:pt-14'>
+        <div className='flex-grow'>
+          <div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
+            Settings
+            <span
+              className='hover:cursor-pointer lg:hidden'
+              onClick={() => setIsMinimized(!isMinimized)}
+            >
+              {isMinimized ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            </span>
+          </div>
 
-        <div
-          className={clsx(
-            'transition-max-height duration-300 ease-in-out',
-            isMinimized
-              ? 'max-h-0 opacity-0 lg:max-h-[100vh] lg:opacity-100'
-              : 'max-h-[100vh] pb-4 lg:pb-0'
-          )}
-        >
-          <div className='mt-6 flex grow flex-col gap-2'>
-            <NewMeetingTeamPicker
-              positionOverride={isMobile ? MenuPosition.UPPER_RIGHT : MenuPosition.UPPER_LEFT} // refactor this: https://github.com/ParabolInc/parabol/issues/9274
-              onSelectTeam={onSelectTeam}
-              selectedTeamRef={selectedTeam}
-              teamsRef={availableTeams}
-              customPortal={teamScopePopover}
-              allowAddTeam={viewer.featureFlags.adHocTeams}
-            />
-            {type === 'retrospective' && (
-              <>
-                <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.retroSettings} />
-                <NewMeetingSettingsToggleTeamHealth
-                  settingsRef={selectedTeam.retroSettings}
-                  teamRef={selectedTeam}
-                />
-                <NewMeetingSettingsToggleAnonymity settingsRef={selectedTeam.retroSettings} />
-              </>
-            )}
-            {type === 'poker' && (
-              <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.pokerSettings} />
-            )}
-            {type === 'action' && (
-              <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.actionSettings} />
+          <div
+            className={clsx(
+              'transition-max-height duration-300 ease-in-out',
+              isMinimized
+                ? 'max-h-0 opacity-0 lg:max-h-[100vh] lg:opacity-100'
+                : 'max-h-[100vh] pb-4 lg:pb-0'
             )}
+          >
+            <div className='mt-6 flex grow flex-col gap-2'>
+              <NewMeetingTeamPicker
+                positionOverride={isMobile ? MenuPosition.UPPER_RIGHT : MenuPosition.UPPER_LEFT} // refactor this: https://github.com/ParabolInc/parabol/issues/9274
+                onSelectTeam={onSelectTeam}
+                selectedTeamRef={selectedTeam}
+                teamsRef={availableTeams}
+                customPortal={teamScopePopover}
+                allowAddTeam={viewer.featureFlags.adHocTeams}
+              />
+              {type === 'retrospective' && (
+                <>
+                  <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.retroSettings} />
+                  <NewMeetingSettingsToggleTeamHealth
+                    settingsRef={selectedTeam.retroSettings}
+                    teamRef={selectedTeam}
+                  />
+                  <NewMeetingSettingsToggleAnonymity settingsRef={selectedTeam.retroSettings} />
+                </>
+              )}
+              {type === 'poker' && (
+                <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.pokerSettings} />
+              )}
+              {type === 'action' && (
+                <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.actionSettings} />
+              )}
+            </div>
           </div>
         </div>
-      </div>
 
-      <div className='z-10 flex h-fit w-full flex-col gap-2 pb-4'>
-        {error && <StyledError>{error.message}</StyledError>}
-        <NewMeetingActionsCurrentMeetings team={selectedTeam} />
-        <ScheduleMeetingButton
-          handleStartActivity={handleStartActivity}
-          mutationProps={mutationProps}
-          teamRef={selectedTeam}
-          placeholder={meetingNamePlaceholder}
-          withRecurrence={withRecurrence}
-        />
-        <FlatPrimaryButton
-          onClick={() => handleStartActivity()}
-          waiting={submitting}
-          className='h-14'
-        >
-          <div className='text-lg'>Start Activity</div>
-        </FlatPrimaryButton>
+        <div className='z-10 flex h-fit w-full flex-col gap-2 pb-4'>
+          {error && <StyledError>{error.message}</StyledError>}
+          <NewMeetingActionsCurrentMeetings team={selectedTeam} />
+          <ScheduleMeetingButton
+            handleStartActivity={handleStartActivity}
+            mutationProps={mutationProps}
+            teamRef={selectedTeam}
+            placeholder={meetingNamePlaceholder}
+            withRecurrence={withRecurrence}
+          />
+          <FlatPrimaryButton
+            onClick={() => handleStartActivity()}
+            waiting={submitting}
+            className='h-14'
+          >
+            <div className='text-lg'>Start Activity</div>
+          </FlatPrimaryButton>
+        </div>
       </div>
-    </div>
+    </>
   )
 }
 

From dfe77ed1f18af90522851507a228ed6ebd3b4d31 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Thu, 18 Apr 2024 14:44:40 +0200
Subject: [PATCH 7/9] More CSS

---
 .../ActivityDetails/ActivityDetails.tsx       | 37 +++++++++----------
 .../ActivityDetails/TemplateDetails.tsx       |  4 +-
 .../ActivityDetailsSidebar.tsx                |  2 +-
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
index 36d65a7b639..621bee4ac14 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -94,7 +94,7 @@ const ActivityDetails = (props: Props) => {
   return (
     <div className='flex h-full w-full flex-col bg-white'>
       <div className='flex grow'>
-        <div className='mt-4 grow'>
+        <div className='mt-4 w-full grow'>
           <div className='mb-14 ml-4 flex h-min w-max items-center'>
             <div className='mr-4'>
               <Link to={categoryLink}>
@@ -104,10 +104,10 @@ const ActivityDetails = (props: Props) => {
             <div className='w-max text-xl font-semibold'>Start Activity</div>
           </div>
           <div className='mx-auto'>
-            <div className='flex flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14'>
+            <div className='flex flex-col justify-start pl-4 pr-4 md:pr-14 xl:flex-row xl:justify-center xl:pl-14'>
               <div>
                 <ActivityCard
-                  className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
+                  className='mb-8 w-80 max-sm:mx-auto sm:ml-14 xl:ml-0 xl:mb-0'
                   theme={CATEGORY_THEMES[category as CategoryID]}
                   badge={null}
                   type={type}
@@ -115,27 +115,24 @@ const ActivityDetails = (props: Props) => {
                   <ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
                 </ActivityCard>
               </div>
-              <div className='pb-20'>
-                <div className='mb-10 space-y-2 pl-14'>
-                  <div className='flex min-h-[40px] items-center'>
-                    <EditableTemplateName
-                      className='text-[32px] leading-9'
-                      name={activity.name}
-                      templateId={activity.id}
-                      isOwner={isOwner && isEditing}
-                    />
-                  </div>
-                  <TemplateDetails
-                    activityRef={activity}
-                    viewerRef={viewer}
-                    isEditing={isEditing}
-                    setIsEditing={setIsEditing}
+              <div className='mb-10 space-y-2 sm:pl-14'>
+                <div className='flex min-h-[40px] items-center'>
+                  <EditableTemplateName
+                    className='text-[32px] leading-9'
+                    name={activity.name}
+                    templateId={activity.id}
+                    isOwner={isOwner && isEditing}
                   />
                 </div>
+                <TemplateDetails
+                  activityRef={activity}
+                  viewerRef={viewer}
+                  isEditing={isEditing}
+                  setIsEditing={setIsEditing}
+                />
               </div>
             </div>
           </div>
-          {!isEditing && <div className='h-48 lg:hidden' />}
         </div>
         <div className='hidden lg:block'>
           <ActivityDetailsSidebar
@@ -147,7 +144,7 @@ const ActivityDetails = (props: Props) => {
           />
         </div>
       </div>
-      <div className={clsx('fixed bottom-0 w-full lg:hidden', isEditing && 'hidden')}>
+      <div className={clsx('lg:hidden', isEditing && 'hidden')}>
         <ActivityDetailsSidebar
           selectedTemplateRef={activity}
           teamsRef={teams}
diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
index 2f334d7b8ea..80e771ccd4d 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
@@ -275,9 +275,9 @@ export const TemplateDetails = (props: Props) => {
         </div>
         {activityDescription}
       </div>
-      <IntegrationsTip>{integrationsTip}</IntegrationsTip>
+      <IntegrationsTip className='flex-wrap'>{integrationsTip}</IntegrationsTip>
 
-      <div className='-ml-14 pt-4'>
+      <div className='pt-4 sm:-ml-14'>
         {prompts && (
           <>
             <TemplatePromptList
diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
index 4d735ea0fe1..a3511ad6cee 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
@@ -252,7 +252,7 @@ const ActivityDetailsSidebar = (props: Props) => {
 
   return (
     <>
-      <div className='bottom-0 flex w-full flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:sticky lg:right-0 lg:top-0 lg:min-h-screen lg:w-96 lg:border-l lg:pt-14'>
+      <div className='sticky bottom-0 flex w-screen flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:min-h-screen lg:w-full lg:w-96 lg:border-l lg:pt-14'>
         <div className='flex-grow'>
           <div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
             Settings

From d3cd078b613dd09643fcb16fd2589cf2460afa35 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Tue, 23 Apr 2024 17:08:08 +0200
Subject: [PATCH 8/9] Hide template details image on small screens

It provides little value for the amount of screen estate it takes up on
phone.
---
 .../ActivityLibrary/ActivityDetails/ActivityDetails.tsx       | 4 ++--
 .../components/ActivityLibrary/ActivityDetailsSidebar.tsx     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
index 621bee4ac14..b37795d8e05 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -95,7 +95,7 @@ const ActivityDetails = (props: Props) => {
     <div className='flex h-full w-full flex-col bg-white'>
       <div className='flex grow'>
         <div className='mt-4 w-full grow'>
-          <div className='mb-14 ml-4 flex h-min w-max items-center'>
+          <div className='mb-14 ml-4 flex h-min w-max items-center max-md:mb-6'>
             <div className='mr-4'>
               <Link to={categoryLink}>
                 <IconLabel icon={'arrow_back'} iconLarge />
@@ -107,7 +107,7 @@ const ActivityDetails = (props: Props) => {
             <div className='flex flex-col justify-start pl-4 pr-4 md:pr-14 xl:flex-row xl:justify-center xl:pl-14'>
               <div>
                 <ActivityCard
-                  className='mb-8 w-80 max-sm:mx-auto sm:ml-14 xl:ml-0 xl:mb-0'
+                  className='mb-8 w-80 max-md:hidden sm:ml-14 xl:ml-0 xl:mb-0'
                   theme={CATEGORY_THEMES[category as CategoryID]}
                   badge={null}
                   type={type}
diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
index a3511ad6cee..47a0daa8d95 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
@@ -252,7 +252,7 @@ const ActivityDetailsSidebar = (props: Props) => {
 
   return (
     <>
-      <div className='sticky bottom-0 flex w-screen flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:min-h-screen lg:w-full lg:w-96 lg:border-l lg:pt-14'>
+      <div className='sticky bottom-0 flex w-full flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:min-h-screen lg:w-full lg:w-96 lg:border-l lg:pt-14'>
         <div className='flex-grow'>
           <div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
             Settings

From e746b8b01ecc1c2b714354965dc9465fae4deb50 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Thu, 25 Apr 2024 14:00:56 +0200
Subject: [PATCH 9/9] Avoid shrinking and expanding of the sidebar when
 switching teams

---
 .../ActivityLibrary/ActivityDetails/ActivityDetails.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
index b37795d8e05..e998e62de5e 100644
--- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
+++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
@@ -134,7 +134,7 @@ const ActivityDetails = (props: Props) => {
             </div>
           </div>
         </div>
-        <div className='hidden lg:block'>
+        <div className='hidden w-[385px] shrink-0 lg:block'>
           <ActivityDetailsSidebar
             selectedTemplateRef={activity}
             teamsRef={teams}