From 869b97d091efe52baca4635a17bf3c25bbf3b2cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?KMY=EF=BC=88=E9=9B=AA=E3=81=82=E3=81=99=E3=81=8B=EF=BC=89?=
 <tt@kmycode.net>
Date: Thu, 28 Mar 2024 08:58:35 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20#657=20=E3=82=A2=E3=83=B3=E3=83=86?=
 =?UTF-8?q?=E3=83=8A=E3=80=81=E3=82=B5=E3=83=BC=E3=82=AF=E3=83=AB=E3=81=AE?=
 =?UTF-8?q?=E8=A9=B3=E7=B4=B0=E8=A8=AD=E5=AE=9A=E3=83=9A=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E5=B4=A9=E3=82=8C?=
 =?UTF-8?q?=20(#679)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/antenna_setting/index.jsx        | 113 ++++++++++--------
 .../features/antenna_timeline/index.jsx       |  16 +--
 .../features/circle_statuses/index.jsx        |  16 +--
 3 files changed, 82 insertions(+), 63 deletions(-)

diff --git a/app/javascript/mastodon/features/antenna_setting/index.jsx b/app/javascript/mastodon/features/antenna_setting/index.jsx
index 2bcf6f0e31..99aa4e2aba 100644
--- a/app/javascript/mastodon/features/antenna_setting/index.jsx
+++ b/app/javascript/mastodon/features/antenna_setting/index.jsx
@@ -329,19 +329,23 @@ class AntennaSetting extends PureComponent {
     if (!isStl && !isLtl) {
       columnSettings = (
         <>
-          <div className='setting-toggle'>
-            <Toggle id={`antenna-${id}-mediaonly`} checked={isMediaOnly} onChange={this.onMediaOnlyToggle} />
-            <label htmlFor={`antenna-${id}-mediaonly`} className='setting-toggle__label'>
-              <FormattedMessage id='antennas.media_only' defaultMessage='Media only' />
-            </label>
-          </div>
+          <section className='similar-row'>
+            <div className='setting-toggle'>
+              <Toggle id={`antenna-${id}-mediaonly`} checked={isMediaOnly} onChange={this.onMediaOnlyToggle} />
+              <label htmlFor={`antenna-${id}-mediaonly`} className='setting-toggle__label'>
+                <FormattedMessage id='antennas.media_only' defaultMessage='Media only' />
+              </label>
+            </div>
+          </section>
 
-          <div className='setting-toggle'>
-            <Toggle id={`antenna-${id}-ignorereblog`} checked={isIgnoreReblog} onChange={this.onIgnoreReblogToggle} />
-            <label htmlFor={`antenna-${id}-ignorereblog`} className='setting-toggle__label'>
-              <FormattedMessage id='antennas.ignore_reblog' defaultMessage='Exclude boosts' />
-            </label>
-          </div>
+          <section className='similar-row'>
+            <div className='setting-toggle'>
+              <Toggle id={`antenna-${id}-ignorereblog`} checked={isIgnoreReblog} onChange={this.onIgnoreReblogToggle} />
+              <label htmlFor={`antenna-${id}-ignorereblog`} className='setting-toggle__label'>
+                <FormattedMessage id='antennas.ignore_reblog' defaultMessage='Exclude boosts' />
+              </label>
+            </div>
+          </section>
         </>
       );
     }
@@ -379,6 +383,9 @@ class AntennaSetting extends PureComponent {
       return { value: list[1].get('id'), label: list[1].get('title') };
     });
 
+    const isShowStlToggle = !isLtl && (enableLocalTimeline || isStl);
+    const isShowLtlToggle = !isStl && (enableLocalTimeline || isLtl);
+
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={title}>
         <ColumnHeader
@@ -391,46 +398,54 @@ class AntennaSetting extends PureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
         >
-          <div className='column-settings__row column-header__links'>
-            <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditAntennaClick}>
-              <Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='antennas.edit_static' defaultMessage='Edit antenna' />
-            </button>
+          <div className='column-settings'>
+            <section className='column-header__links'>
+              <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditAntennaClick}>
+                <Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='antennas.edit_static' defaultMessage='Edit antenna' />
+              </button>
 
-            <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleDeleteClick}>
-              <Icon id='trash' icon={DeleteIcon} /> <FormattedMessage id='antennas.delete' defaultMessage='Delete antenna' />
-            </button>
+              <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleDeleteClick}>
+                <Icon id='trash' icon={DeleteIcon} /> <FormattedMessage id='antennas.delete' defaultMessage='Delete antenna' />
+              </button>
 
-            <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleTimelineClick}>
-              <Icon id='wifi' icon={AntennaIcon} /> <FormattedMessage id='antennas.go_timeline' defaultMessage='Go to antenna timeline' />
-            </button>
+              <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleTimelineClick}>
+                <Icon id='wifi' icon={AntennaIcon} /> <FormattedMessage id='antennas.go_timeline' defaultMessage='Go to antenna timeline' />
+              </button>
+            </section>
+
+            {isShowStlToggle && (
+              <section>
+                <div className='setting-toggle'>
+                  <Toggle id={`antenna-${id}-stl`} checked={isStl} onChange={this.onStlToggle} />
+                  <label htmlFor={`antenna-${id}-stl`} className='setting-toggle__label'>
+                    <FormattedMessage id='antennas.stl' defaultMessage='STL mode' />
+                  </label>
+                </div>
+              </section>
+            )}
+
+            {isShowLtlToggle && (
+              <section className={isShowStlToggle && 'similar-row'}>
+                <div className='setting-toggle'>
+                  <Toggle id={`antenna-${id}-ltl`} checked={isLtl} onChange={this.onLtlToggle} />
+                  <label htmlFor={`antenna-${id}-ltl`} className='setting-toggle__label'>
+                    <FormattedMessage id='antennas.ltl' defaultMessage='LTL mode' />
+                  </label>
+                </div>
+              </section>
+            )}
+
+            <section className={(isShowStlToggle || isShowLtlToggle) && 'similar-row'}>
+              <div className='setting-toggle'>
+                <Toggle id={`antenna-${id}-noinsertfeeds`} checked={isInsertFeeds} onChange={this.onNoInsertFeedsToggle} />
+                <label htmlFor={`antenna-${id}-noinsertfeeds`} className='setting-toggle__label'>
+                  <FormattedMessage id='antennas.insert_feeds' defaultMessage='Insert to feeds' />
+                </label>
+              </div>
+            </section>
+
+            {columnSettings}
           </div>
-
-          {!isLtl && (enableLocalTimeline || isStl) && (
-            <div className='setting-toggle'>
-              <Toggle id={`antenna-${id}-stl`} checked={isStl} onChange={this.onStlToggle} />
-              <label htmlFor={`antenna-${id}-stl`} className='setting-toggle__label'>
-                <FormattedMessage id='antennas.stl' defaultMessage='STL mode' />
-              </label>
-            </div>
-          )}
-
-          {!isStl && (enableLocalTimeline || isLtl) && (
-            <div className='setting-toggle'>
-              <Toggle id={`antenna-${id}-ltl`} checked={isLtl} onChange={this.onLtlToggle} />
-              <label htmlFor={`antenna-${id}-ltl`} className='setting-toggle__label'>
-                <FormattedMessage id='antennas.ltl' defaultMessage='LTL mode' />
-              </label>
-            </div>
-          )}
-
-          <div className='setting-toggle'>
-            <Toggle id={`antenna-${id}-noinsertfeeds`} checked={isInsertFeeds} onChange={this.onNoInsertFeedsToggle} />
-            <label htmlFor={`antenna-${id}-noinsertfeeds`} className='setting-toggle__label'>
-              <FormattedMessage id='antennas.insert_feeds' defaultMessage='Insert to feeds' />
-            </label>
-          </div>
-
-          {columnSettings}
         </ColumnHeader>
 
         {stlAlert}
diff --git a/app/javascript/mastodon/features/antenna_timeline/index.jsx b/app/javascript/mastodon/features/antenna_timeline/index.jsx
index 02234b1381..26b21ff679 100644
--- a/app/javascript/mastodon/features/antenna_timeline/index.jsx
+++ b/app/javascript/mastodon/features/antenna_timeline/index.jsx
@@ -171,14 +171,16 @@ class AntennaTimeline extends PureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
         >
-          <div className='column-settings__row column-header__links'>
-            <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditClick}>
-              <Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='antennas.edit' defaultMessage='Edit antenna' />
-            </button>
+          <div className='column-settings'>
+            <section className='column-header__links'>
+              <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditClick}>
+                <Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='antennas.edit' defaultMessage='Edit antenna' />
+              </button>
 
-            <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleDeleteClick}>
-              <Icon id='trash' icon={DeleteIcon} /> <FormattedMessage id='antennas.delete' defaultMessage='Delete antenna' />
-            </button>
+              <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleDeleteClick}>
+                <Icon id='trash' icon={DeleteIcon} /> <FormattedMessage id='antennas.delete' defaultMessage='Delete antenna' />
+              </button>
+            </section>
           </div>
         </ColumnHeader>
 
diff --git a/app/javascript/mastodon/features/circle_statuses/index.jsx b/app/javascript/mastodon/features/circle_statuses/index.jsx
index ac1abd91dc..51cb964343 100644
--- a/app/javascript/mastodon/features/circle_statuses/index.jsx
+++ b/app/javascript/mastodon/features/circle_statuses/index.jsx
@@ -152,14 +152,16 @@ class CircleStatuses extends ImmutablePureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
         >
-          <div className='column-settings__row column-header__links'>
-            <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditClick}>
-              <Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='circles.edit' defaultMessage='Edit circle' />
-            </button>
+          <div className='column-settings'>
+            <section className='column-header__links'>
+              <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditClick}>
+                <Icon id='pencil' icon={EditIcon} /> <FormattedMessage id='circles.edit' defaultMessage='Edit circle' />
+              </button>
 
-            <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleDeleteClick}>
-              <Icon id='trash' icon={DeleteIcon} /> <FormattedMessage id='circles.delete' defaultMessage='Delete circle' />
-            </button>
+              <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleDeleteClick}>
+                <Icon id='trash' icon={DeleteIcon} /> <FormattedMessage id='circles.delete' defaultMessage='Delete circle' />
+              </button>
+            </section>
           </div>
         </ColumnHeader>