CSS を共有してください！TC の修正がより簡単になります。
これはいくらかハック的な方法ですが（/mobile/css ではなく common/css で実行します）
@use "lib/viewport";
@include viewport.until(md) {
.d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
}
「いいね！」 2
申し訳ありませんが、このコンポーネントを常に最新の状態に保つまで手が回っておりませんでした。ただし、モバイル/デスクトップ表示からの移行により、元のテーマコンポーネントが前提としていたいくつかの部分が確かに壊れてしまいました。
@Lilly、この件についてご指摘いただきありがとうございます。当面は position: absolute で対応可能ですが、ここではコンポーネント内のアイテムの並べ替えを単純な CSS グリッドで解決しています。
「いいね！」 2
みなさんこんにちは。フォローアップです。Lilly がこの整理と最新化のために多くの作業を行ってくれました。彼女の変更をマージしましたので、これで問題なく使えるはずです。
「いいね！」 4
ねえ @featheredtoast、折りたたみ式スマホや一部のタブレットにおける Horizon テーマのビューポートサイズでのヘッダーの問題を修正する PR をここに置きました。
確認してマージしていただけると助かります：
「いいね！」 5
良さそうですね。試してみましょう。@Lilly さん、ありがとう！
「いいね！」 2
トピック内で上にスクロールしてヘッダーが切り替わると（トピック名とカテゴリを表示する）、新しいヘッダーにはハンバーガーアイコンがありません。ハンバーガーアイコンが存在する場合は左側に表示されるため、フォーラムのアイコンの位置が変わってしまいます。フォーラムのアイコンの右側にハンバーガーアイコンを表示するオプションを追加できないか考えています。そうすれば、どちらのヘッダーでもフォーラムのアイコンが同じ位置に固定されます。よろしくお願いします。
追記：デスクトップ版でテーマコンポーネントを使用していない場合、ハンバーガーアイコンが常に表示されていることに気づきました。モバイル版でもこのオプションを追加できるかもしれません。
個人的には、この変更には賛成ではありません（@featheredtoast は違う意見かもしれません）が、必要であれば、フォーラムの別のテーマコンポーネントにこの CSS を追加して、項目の順序を上書きできます。
.d-header {
display: grid;
grid-template-areas: 'logo left-menu custom-header-icon-link-1 custom-header-icon-link-2 custom-header-icon-link-3 custom-header-icon-link-4 custom-header-icon-link-5 extra-info chat header-buttons search right-menu'!important;
}
結果：
長いトピックタイトルに対してヘッダーのスペースを最大化するため、モバイル版のスクロール時ヘッダーにはハンバーガーアイコンを表示すべきではありません
「いいね！」 5
@Lillyと同じ意見です。目標は、左側のハンバーガーメニューを他のアプリのように感じさせることでした… ジャンプは、デフォルトの体験ですでにそれを行っていたため、最適化していませんでした。
彼女が紹介したようにグリッド状になると、ここでのベーステーマコンポーネントからの最小限の入力で、すべての要素の位置を更新するのは簡単です。
十分な需要があればPRにオープンですが、このようなリクエストは初めて聞きます。
「いいね！」 4
本当にそうでしょうか？
デスクトップでは（記憶が正しければ）ハンバーガーメニューは常にフォーラムアイコンの左側に固定されているため、「ジャンプ」は発生しません。
モバイルでも、フォーラムアイコン以外がすべて置き換えられるため、「ジャンプ」は発生しません。
「いいね！」 1
テーマコンポーネントを使い始めました（共有していただきありがとうございます！）。UI/UXの理念として、可能な限りクリーンな状態を保つため、モバイル版のメインアイコンを無効化しました。
「いいね！」 1
