Fix: #657 アンテナ、サークルの詳細設定ペインのデザイン崩れ (#679)

app/javascript/mastodon/features/antenna_setting/index.jsx

@@ -329,19 +329,23 @@ class AntennaSetting extends PureComponent {
     if (!isStl && !isLtl) {
       columnSettings = (
         <>
+          <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>
 
+          <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,7 +398,8 @@ class AntennaSetting extends PureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
         >
-          <div className='column-settings__row column-header__links'>
+          <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>
@@ -403,34 +411,41 @@ class AntennaSetting extends PureComponent {
               <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>
-          </div>
+            </section>
 
-          {!isLtl && (enableLocalTimeline || isStl) && (
+            {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>
             )}
 
-          {!isStl && (enableLocalTimeline || isLtl) && (
+            {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>
         </ColumnHeader>
 
         {stlAlert}

app/javascript/mastodon/features/antenna_timeline/index.jsx

@@ -171,7 +171,8 @@ class AntennaTimeline extends PureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
         >
-          <div className='column-settings__row column-header__links'>
+          <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>
@@ -179,6 +180,7 @@ class AntennaTimeline extends PureComponent {
               <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>
 

app/javascript/mastodon/features/circle_statuses/index.jsx

@@ -152,7 +152,8 @@ class CircleStatuses extends ImmutablePureComponent {
           pinned={pinned}
           multiColumn={multiColumn}
         >
-          <div className='column-settings__row column-header__links'>
+          <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>
@@ -160,6 +161,7 @@ class CircleStatuses extends ImmutablePureComponent {
               <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>