-
Notifications
You must be signed in to change notification settings - Fork 151
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[PURCHASE-2004] Adjust breakpoints for tablet experience #5969
Conversation
a4b0053
to
97708e9
Compare
Duplicate Sources / Packages - Duplicates found!
|
97708e9
to
1aae866
Compare
@@ -219,7 +219,7 @@ const Conversation: React.FC<ConversationProps> = props => { | |||
<NoScrollFlex flexDirection="column" width="100%"> | |||
<MessageContainer> | |||
<Box> | |||
<Spacer mt={["75px", 2]} /> | |||
<Spacer mt={["75px", "75px", 2]} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -32,7 +32,7 @@ const Conversations: React.FC<ConversationsProps> = props => { | |||
.indexOf(selectedConversationID) | |||
|
|||
return ( | |||
<Container width={["100%", "375px"]}> | |||
<Container width={["100%", "100%", "375px"]}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
height: calc(100vh - 55px); | ||
`} | ||
& > * { | ||
overflow-y: scroll; | ||
overflow-x: hidden; | ||
} | ||
& > .fresnel-greaterThan-xs { | ||
> .fresnel-greaterThan-sm { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
height: calc(100vh - 55px); | ||
`} | ||
& > * { | ||
overflow-y: scroll; | ||
overflow-x: hidden; | ||
} | ||
& > .fresnel-greaterThan-xs { | ||
> .fresnel-greaterThan-sm { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just as an FYI, there's the ability to use your own container here. Not saying this is a better way but it might be a bit nicer than digging into implementation css.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good call out! We'll look at improving this in a separate PR.
1aae866
to
47df52d
Compare
${media.xs` | ||
height: calc(100vh - 55px); | ||
${media.md` | ||
height: calc(100vh - 60px); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Adjust break points for tablet experience
We want tablet to display the same experience as mobile: