imprv: truncate page path when editing

[WNomunomu]

タスク

https://redmine.weseek.co.jp/issues/141361

概要

• 親ページのPagePathが長い時にPagePathの前半がtruncateされるようにしました。
• PagePathHeaderのボタンが隠れてしまう問題を解決しました。

変更点

• PagePathHeaderのcontainerとPagePathHierarchicalLinkのwidthを比較し、どちらが大きいかによって、スタイルを変更するようにしました。
• 画面のwidthからsub-navのwidthを引いたwidthをPagePathHeaderに指定することで、PagePathHeaderがsub-navに隠れてしまう問題を解決しました。

スクリーンショット

通常時 truncate時

セルフチェック

• [x] コンフリクト解消したか
• [x] 余計なコードは残っていないか
• [x] 適切にメモ化したか
• [x] 責務の問題はクリアしているか
• [x] CIは通っているか
• [x] PRの内容は適切にかけているか

[reg-suit[bot]]

reg-suit detected visual differences.

Check this report, and review them.

:red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle::red_circle: :white_circle::white_circle:

:large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle::large_blue_circle:

What do the circles mean?

The number of circles represent the number of changed images.
:red_circle: : Changed items, :white_circle: : New items, :black_circle: : Deleted items, and :large_blue_circle: Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.