Repository navigation
fix(web): フォーカスの枠が、はみ出しを切る親で欠ける部品を直す - #826
Merged
Merged
Conversation
フォーカスの枠は要素の外へ4px出る。端まで届く行や、横に流れるタブの列の中のボタンでは、 親が枠を切って片側が見えなかった。 - 全ページを巡回する配置の検査（e2e/support/layoutDefects.ts）に cut-focus-outline を足す。 PCの大きさの画面で、枠の片側が親に切られる部品を報告する。直す前は延べ167件 - Connectionsのグループの行、サイドバーの「新しいセッション」、接続エディタのタブ、スニペットの行、 SFTPのタブとパンくずは、枠を内側に描く（sshc-focus-inset） - 接続先を追加するフォームは、縦に流れる枠の左右に余白を取る Claude-Session: https://claude.ai/code/session_014WPnWu8NLT7prLQhhzYpc1
内側に描く枠が効くことを e2e で確かめる（グループの行で outline-offset が -2px）。 Claude-Session: https://claude.ai/code/session_014WPnWu8NLT7prLQhhzYpc1
#823 で hover に替えたが、前後のコードは bg-well の箱の中にあり、ライトでは hover（#f0f0f0）と well（#f2f2f2）の見分けが付かない。一段濃い surface にする。 Claude-Session: https://claude.ai/code/session_014WPnWu8NLT7prLQhhzYpc1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
何を直したか
フォーカスの枠（2pxのアウトライン、要素から2px離す）は、要素の外へ4px出ます。端まで届く行や、横に流れるタブの列の中のボタンでは、はみ出しを切る親が枠を切って、片側が見えませんでした。
sshc-focus-inset）overflow-y-autoの枠は横のはみ出しも切るためです確かめたこと
e2e/support/layoutDefects.ts）にcut-focus-outlineを足しました。PCの大きさの画面で、枠の片側が親に切られる部品を報告します。スマホの配置は対象外です（指で使う部品は枠を出さないため）e2e/layout-audit.spec.tsの全部が通りましたsftp-tab-order、sftp-workspace-layout、connections-groups、connectionsのe2eと合わせて59件が通りました。npm run typecheckとnpm run lintも通りましたhttps://claude.ai/code/session_014WPnWu8NLT7prLQhhzYpc1