[STYLE] Radix-UI 사용시 max-w-md 적용 위치 #125

HiimKwak · 2023-12-24T06:16:57Z

현재 모바일 디바이스 사이즈가 아닌 큰 화면에서 햄버거를 클릭하면 메인 화면이 우측으로 찌그러지는 버그가 있습니다. 버그까지 고치고 PR 머지하겠습니다!

확인한 결과 layout에 적용돼있는 max-w-md 때문에 viewport가 정해진 크기를 벗어나면 화면이 우측으로 찌그러집니다.

해당 프로퍼티를 한단계 이동시키면 어떨까요? max-w-md로 줄여진 width와 사이드바를 분리하는 방법을 찾지 못했고, 이렇게 했을 때 헤더는 브라우저의 viewport만큼 width를 확보해 버그가 사라지면서 메인컨텐츠는 모바일 디바이스 width를 유지할 수 있습니다.

<body className={`${inter.className} bg-slate-50`}>
  <ReactQueryProvider>
    <Header />
    <main className="m-auto max-w-md p-4">{children}</main>
    <Footer />
  </ReactQueryProvider>
</body>

Originally posted by @HiimKwak in #69 (comment)

HiimKwak mentioned this issue Dec 24, 2023

[FEAT]: 관리자 매치 정보 수정 구현 #126

Merged

HiimKwak self-assigned this Dec 24, 2023

HiimKwak added the STYLE UI 수정 label Dec 24, 2023

HiimKwak changed the title ~~Radix-UI 사용시 max-w-md 적용 위치~~ [STYLE] Radix-UI 사용시 max-w-md 적용 위치 Dec 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[STYLE] Radix-UI 사용시 max-w-md 적용 위치 #125

[STYLE] Radix-UI 사용시 max-w-md 적용 위치 #125

HiimKwak commented Dec 24, 2023 •

edited

Loading

[STYLE] Radix-UI 사용시 max-w-md 적용 위치 #125

[STYLE] Radix-UI 사용시 max-w-md 적용 위치 #125

Comments

HiimKwak commented Dec 24, 2023 • edited Loading

HiimKwak commented Dec 24, 2023 •

edited

Loading