fix(Sprint Poker): Remove padding in Discussion Drawer (#6700)

* Chnages in fix/6433 * changes in fix/6433 * minor changes #1
ParabolInc · Jun 20, 2022 · f10a04a · f10a04a
1 parent cd35aa1
commit f10a04a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/client/components/EstimatePhaseDiscussionDrawer.tsx b/packages/client/components/EstimatePhaseDiscussionDrawer.tsx
@@ -6,7 +6,7 @@ import {desktopSidebarShadow} from '~/styles/elevation'
 import {PALETTE} from '~/styles/paletteV3'
 import {ICON_SIZE} from '~/styles/typographyV2'
 import {EstimatePhaseDiscussionDrawer_meeting} from '~/__generated__/EstimatePhaseDiscussionDrawer_meeting.graphql'
-import {BezierCurve, DiscussionThreadEnum, ZIndex} from '../types/constEnums'
+import {BezierCurve, Breakpoint, DiscussionThreadEnum, ZIndex} from '../types/constEnums'
 import {DiscussionThreadables} from './DiscussionThreadList'
 import DiscussionThreadListEmptyState from './DiscussionThreadListEmptyState'
 import DiscussionThreadRoot from './DiscussionThreadRoot'
@@ -29,7 +29,12 @@ const Drawer = styled('div')<{isDesktop: boolean; isOpen: boolean}>(({isDesktop,
   transition: `all 200ms ${BezierCurve.DECELERATE}`,
   userSelect: 'none',
   width: isOpen || !isDesktop ? DiscussionThreadEnum.WIDTH : 0,
-  zIndex: ZIndex.SIDEBAR
+  zIndex: ZIndex.SIDEBAR,
+  [`@media screen and (max-width: ${Breakpoint.POKER_DISCUSSION_FULLSCREEN_DRAWER}px)`]: {
+    width: '100vw',
+    position: 'fixed',
+    right: isOpen ? `-${DiscussionThreadEnum.WIDTH}px` : '-100vw'
+  }
 }))
 
 const ThreadColumn = styled('div')({
@@ -98,7 +103,7 @@ const EstimatePhaseDiscussionDrawer = (props: Props) => {
         <DiscussionThreadRoot
           allowedThreadables={allowedThreadables}
           discussionId={discussionId!}
-          width={'calc(100% - 16px)'}
+          width={'100%'}
           emptyState={
             <DiscussionThreadListEmptyState
               allowTasks={false}

diff --git a/packages/client/components/PokerEstimatePhase.tsx b/packages/client/components/PokerEstimatePhase.tsx
@@ -22,7 +22,10 @@ import ResponsiveDashSidebar from './ResponsiveDashSidebar'
 
 const StyledMeetingHeaderAndPhase = styled(MeetingHeaderAndPhase)<{isOpen: boolean}>(
   ({isOpen}) => ({
-    width: isOpen ? `calc(100% - ${DiscussionThreadEnum.WIDTH}px)` : '100%'
+    width: isOpen ? `calc(100% - ${DiscussionThreadEnum.WIDTH}px)` : '100%',
+    [`@media screen and (max-width: ${Breakpoint.POKER_DISCUSSION_FULLSCREEN_DRAWER}px)`]: {
+      width: '100%'
+    }
   })
 )
 

diff --git a/packages/client/types/constEnums.ts b/packages/client/types/constEnums.ts
@@ -37,6 +37,7 @@ export const enum Breakpoint {
   SIDEBAR_LEFT = 1024,
   NEW_MEETING_GRID = 1112,
   NEW_MEETING_SELECTOR = 500,
+  POKER_DISCUSSION_FULLSCREEN_DRAWER = 660,
   SINGLE_REFLECTION_COLUMN = 704, // (ReflectionWith + 16) * 2,
   DASH_BREAKPOINT_WIDEST = 1816, // (4*296) + (5*24) + (256*2) = 4 card cols, 4 col gutters, 2 sidebars
   VOTE_PHASE = 800,