feat: Hackday: Add responsive styling to Modal and Tab component #1015
Conversation
kbesingeryeh
force-pushed
the
sc-49601/make-responsive-components
branch
from
720aae1
to
48f6b9f
Compare
src/components/Tabs.tsx
Outdated
| @@ -263,8 +263,8 @@ export function getTabStyles() { | |||
| .pbPx(verticalPaddingPx - borderBottomWidthPx).$; | |||
|
|
|||
| return { | |||
| baseStyles: Css.df.aic.hPx(32).pyPx(verticalPaddingPx).px1.outline0.gray700.add("width", "fit-content") | |||
| .cursorPointer.sm.$, | |||
| baseStyles: Css.df.aic.hPx(32).pyPx(verticalPaddingPx).px1.outline0.gray700.add("width", "fit-content").overflowAuto | |||
There was a problem hiding this comment.
request: Can you remove the overflowAuto from here and put it on the element that has the role="tablist" attribute?
There was a problem hiding this comment.
Actually, I think we need to put that on the parent of the role="tablist" element. This is because we have that {right} property that we want within the scrollable container. We should also add a gap property to ensure we have some spacing between the Tab group and the right content.
There was a problem hiding this comment.
got it. make sense
kbesingeryeh
requested review from
stephenh,
ksk5280 and
chr1sjf0x
as code owners
src/components/Modal/Modal.tsx
Outdated
| .hPx(height).$ | ||
| .hPx(height) | ||
| .if(sm) | ||
| .vh100.add("width", "100vw").$ |
There was a problem hiding this comment.
request Can you additionally add in maxh("none") and br0 when sm is true. This way it really does take up the full screen. Right now we still hit the maxh("90vh") and see rounded corners, which to me look odd for this. I think we might as well remove those and take up the full screen. Thanks!
## [2.343.0](v2.342.0...v2.343.0) (2024-04-19) ### Features * Hackday: Add responsive styling to Modal and Tab component ([#1015](#1015)) ([c330b5b](c330b5b))
|
馃帀 This PR is included in version 2.343.0 馃帀 The release is available on: Your semantic-release bot 馃摝馃殌 |
No description provided.