Conversation
mumumu6
requested review from
Copilot and
kitsne241
and removed request for
Copilot
There was a problem hiding this comment.
Pull Request Overview
This PR moves scrolling responsibility from the root <v-app> into individual view components and adds custom scrollbar styling.
- Wraps
UserInfoViewcontent in an inner container and updates.containerto use100vhwith its own scroll. - Adjusts
RegistrationViewto occupy full viewport width/height and enable vertical scrolling. - Introduces global CSS to hide page overflow and style scrollbars.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/views/UserInfoView.vue | Wrapped view contents in .inner, changed container to 100vh and added overflow-y:auto |
| src/views/RegistrationView.vue | Replaced min-height with height:100vh, added width:100vw and overflow-y:auto |
| src/assets/style.css | Hid html overflow with !important and added ::-webkit-scrollbar custom styles |
Comments suppressed due to low confidence (2)
src/assets/style.css:12
- Using
!importantonhtml { overflow: hidden }can introduce specificity wars and unexpected side effects in other parts of the app. Consider scoping overflow rules to the actual scrollable container instead of the root element.
overflow: hidden !important;
src/views/RegistrationView.vue:142
- Using
100vwcan cause horizontal overflow when scrollbars appear (as they don't reduce the viewport width). Consider usingwidth: 100%or accounting for scrollbar width to avoid unintended horizontal scrolling.
width: 100vw;
| overflow: hidden !important; | ||
| } | ||
|
|
||
| ::-webkit-scrollbar { |
There was a problem hiding this comment.
Scrollbar styling with ::-webkit-scrollbar only works in WebKit browsers. To ensure consistent appearance across all browsers, consider adding non-WebKit properties like scrollbar-color and scrollbar-width for Firefox support.
| width: 4px; /* 縦スクロールバーの幅 */ | ||
| } | ||
|
|
||
| ::-webkit-scrollbar-thumb { | ||
| background-color: rgba(38, 37, 36, 0.45); /* 色を付ける */ | ||
| border-radius: 4px; | ||
| } | ||
|
|
There was a problem hiding this comment.
A 4px scrollbar can be difficult for users with motor impairments to grab. Consider increasing the width or providing a hover state that enlarges the thumb to improve accessibility.
| width: 4px; /* 縦スクロールバーの幅 */ | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background-color: rgba(38, 37, 36, 0.45); /* 色を付ける */ | |
| border-radius: 4px; | |
| } | |
| width: 12px; /* Increased scrollbar width for better accessibility */ | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background-color: rgba(38, 37, 36, 0.45); /* Color of the scrollbar thumb */ | |
| border-radius: 6px; /* Slightly larger border radius for better aesthetics */ | |
| transition: background-color 0.3s, width 0.3s; /* Smooth transition for hover effects */ | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background-color: rgba(38, 37, 36, 0.7); /* Darker color on hover for better visibility */ | |
| width: 16px; /* Enlarged thumb width on hover for easier grabbing */ | |
| } |
There was a problem hiding this comment.
RegistrationView の全体が上揃えになっていて見栄えがわるいので直したほうがよさそう
There was a problem hiding this comment.
containerでスクロールするようにした関係でjustifycontent center消しちゃいました。上にmarginを追加することで修正します。
| } | ||
|
|
||
| ::-webkit-scrollbar { | ||
| width: 4px; /* 縦スクロールバーの幅 */ |
There was a problem hiding this comment.
幅がこれだけ小さいと、ウィンドウ右端のスクロールバーをクリックしても「ウィンドウの横幅を変えたいんだな」判定になってしまって、スクロールバーを掴んでスクロールすることができなくなっています。そのユーザビリティを犠牲にしてでも取り組むべき変更なのかどうかは一考の余地があると思います
|
Macbook + Chrome だと、今の main がこんな感じです |
こんな感じです。合宿画面のほうスクロールバーの横に余白がないですね。 |
|
すみません、まず問題が何であるかを確認したいので #16 に移ってほしいです。お手数かけます 🙇 |
|
#16 (comment) む、むずかしい…。ある環境に依存する問題に対応した結果他の環境での見え方が変わってしまっては本末転倒なので、なるべく他の環境を変えないようにしたいところです この Web アプリは（合宿本番に）Android や iOS などのモバイル環境で使われることを第一に想定していて、その環境における見え方を一番イイ感じに保ちたいと考えています この変更によってスクロールバーが確定で幅をとるようになると、横幅がせまいスマホなどの見え方を悪化させる可能性があります。かといってスクロールバーの横幅をなるべく狭くしてしまうと、それはそれでレビューで書いた通りの犠牲を生じます どうしたものか… |
|
スマホのスクロールバーは細くて、macのスクロールバーは太いのがいいから固定にしたくないってことですか？ |
|
一時的にステージング環境をこのブランチに設定して実機でテストしてみましたが、 
|
|
Windows 以外の環境に無視できない影響がありそうな変更と見受けられます ユーザーから「Windows で rucQ-UI を開くとスクロールバーがデフォルト表示になっていてダサい」という同様のフィードバックが届き次第再度検討するとして、今のところは main の状態を維持するというのでいかがでしょう…？ |
|
rucqではないけど他のサイトで確認はしたんですが上手くいかないんですね |
でスクロールしていたものを各コンポーネント、viewファイルでスクロールするするようにしました。最初に幅いっぱいの領域を確保するとスクロールバーが領域の端におけます。
それに伴って少しcssを編集しています。