From d258edfbafba7b08fc5667417c55c0a325de89cf Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 12:31:56 -0400
Subject: [PATCH 1/6] fix: Small cleanup to search/inbox controls

---
 .../components/common/searchable-select.tsx   |   2 +-
 src/shared/components/person/inbox.tsx        |  40 +++---
 src/shared/components/search.tsx              | 124 ++++++++++--------
 3 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/src/shared/components/common/searchable-select.tsx b/src/shared/components/common/searchable-select.tsx
index 801cd867..ef59a8c2 100644
--- a/src/shared/components/common/searchable-select.tsx
+++ b/src/shared/components/common/searchable-select.tsx
@@ -102,7 +102,7 @@ export class SearchableSelect extends Component<
     const { searchText, selectedIndex, loadingEllipses } = this.state;
 
     return (
-      <div className="searchable-select dropdown">
+      <div className="searchable-select dropdown col-12 col-sm-auto flex-grow-1">
         <button
           id={id}
           type="button"
diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index c414e8be..982044b8 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -221,7 +221,7 @@ export class Inbox extends Component<any, InboxState> {
               title={this.documentTitle}
               path={this.context.router.route.match.url}
             />
-            <h5 className="mb-2">
+            <h1 className="h4 mb-4">
               {I18NextService.i18n.t("inbox")}
               {inboxRss && (
                 <small>
@@ -235,7 +235,7 @@ export class Inbox extends Component<any, InboxState> {
                   />
                 </small>
               )}
-            </h5>
+            </h1>
             {this.hasUnreads && (
               <button
                 className="btn btn-secondary mb-2"
@@ -284,7 +284,7 @@ export class Inbox extends Component<any, InboxState> {
 
   unreadOrAllRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
@@ -319,7 +319,7 @@ export class Inbox extends Component<any, InboxState> {
 
   messageTypeRadios() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="btn-group btn-group-toggle flex-wrap">
         <label
           className={`btn btn-outline-secondary pointer
             ${this.state.messageType == MessageType.All && "active"}
@@ -382,13 +382,15 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="mb-2">
-        <span className="me-3">{this.unreadOrAllRadios()}</span>
-        <span className="me-3">{this.messageTypeRadios()}</span>
-        <CommentSortSelect
-          sort={this.state.sort}
-          onChange={this.handleSortChange}
-        />
+      <div className="row g-2">
+        <div className="col-auto">{this.unreadOrAllRadios()}</div>
+        <div className="col-auto">{this.messageTypeRadios()}</div>
+        <div className="col-auto">
+          <CommentSortSelect
+            sort={this.state.sort}
+            onChange={this.handleSortChange}
+          />
+        </div>
       </div>
     );
   }
@@ -541,9 +543,9 @@ export class Inbox extends Component<any, InboxState> {
       this.state.messagesRes.state == "loading"
     ) {
       return (
-        <h5>
+        <h1 className="h4">
           <Spinner large />
-        </h5>
+        </h1>
       );
     } else {
       return (
@@ -556,9 +558,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.repliesRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const replies = this.state.repliesRes.data.replies;
@@ -603,9 +605,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.mentionsRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const mentions = this.state.mentionsRes.data.mentions;
@@ -653,9 +655,9 @@ export class Inbox extends Component<any, InboxState> {
     switch (this.state.messagesRes.state) {
       case "loading":
         return (
-          <h5>
+          <h1 className="h4">
             <Spinner large />
-          </h5>
+          </h1>
         );
       case "success": {
         const messages = this.state.messagesRes.data.private_messages;
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 5360066c..8a71d60e 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -181,23 +181,28 @@ const Filter = ({
   loading: boolean;
 }) => {
   return (
-    <div className="mb-3 col-sm-6">
-      <label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
-        {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
-      </label>
-      <SearchableSelect
-        id={`${filterType}-filter`}
-        options={[
-          {
-            label: I18NextService.i18n.t("all"),
-            value: "0",
-          },
-        ].concat(options)}
-        value={value ?? 0}
-        onSearch={onSearch}
-        onChange={onChange}
-        loading={loading}
-      />
+    <div className="col-sm-6">
+      <div className="row gx-2">
+        <label
+          className="col-12 col-sm-auto col-form-label flex-grow-0"
+          htmlFor={`${filterType}-filter`}
+        >
+          {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
+        </label>
+        <SearchableSelect
+          id={`${filterType}-filter`}
+          options={[
+            {
+              label: I18NextService.i18n.t("all"),
+              value: "0",
+            },
+          ].concat(options)}
+          value={value ?? 0}
+          onSearch={onSearch}
+          onChange={onChange}
+          loading={loading}
+        />
+      </div>
     </div>
   );
 };
@@ -467,7 +472,7 @@ export class Search extends Component<any, SearchState> {
           title={this.documentTitle}
           path={this.context.router.route.match.url}
         />
-        <h5>{I18NextService.i18n.t("search")}</h5>
+        <h1 className="h4 mb-4">{I18NextService.i18n.t("search")}</h1>
         {this.selects}
         {this.searchForm}
         {this.displayResults(type)}
@@ -500,8 +505,11 @@ export class Search extends Component<any, SearchState> {
 
   get searchForm() {
     return (
-      <form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
-        <div className="col-auto">
+      <form
+        className="row gx-2 gy-3"
+        onSubmit={linkEvent(this, this.handleSearchSubmit)}
+      >
+        <div className="col-auto flex-grow-1 flex-sm-grow-0">
           <input
             type="text"
             className="form-control me-2 mb-2 col-sm-8"
@@ -542,41 +550,45 @@ export class Search extends Component<any, SearchState> {
       communitiesRes.data.communities.length > 0;
 
     return (
-      <div className="mb-2">
-        <select
-          value={type}
-          onChange={linkEvent(this, this.handleTypeChange)}
-          className="form-select d-inline-block w-auto mb-2"
-          aria-label={I18NextService.i18n.t("type")}
-        >
-          <option disabled aria-hidden="true">
-            {I18NextService.i18n.t("type")}
-          </option>
-          {searchTypes.map(option => (
-            <option value={option} key={option}>
-              {I18NextService.i18n.t(
-                option.toString().toLowerCase() as NoOptionI18nKeys
-              )}
-            </option>
-          ))}
-        </select>
-        <span className="ms-2">
-          <ListingTypeSelect
-            type_={listingType}
-            showLocal={showLocal(this.isoData)}
-            showSubscribed
-            onChange={this.handleListingTypeChange}
-          />
-        </span>
-        <span className="ms-2">
-          <SortSelect
-            sort={sort}
-            onChange={this.handleSortChange}
-            hideHot
-            hideMostComments
-          />
-        </span>
-        <div className="row">
+      <>
+        <div className="row gx-2 gy-3 mb-2 mb-sm-3">
+          <div className="col-auto">
+            <select
+              value={type}
+              onChange={linkEvent(this, this.handleTypeChange)}
+              className="form-select d-inline-block w-auto"
+              aria-label={I18NextService.i18n.t("type")}
+            >
+              <option disabled aria-hidden="true">
+                {I18NextService.i18n.t("type")}
+              </option>
+              {searchTypes.map(option => (
+                <option value={option} key={option}>
+                  {I18NextService.i18n.t(
+                    option.toString().toLowerCase() as NoOptionI18nKeys
+                  )}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="col-auto">
+            <ListingTypeSelect
+              type_={listingType}
+              showLocal={showLocal(this.isoData)}
+              showSubscribed
+              onChange={this.handleListingTypeChange}
+            />
+          </div>
+          <div className="col-auto">
+            <SortSelect
+              sort={sort}
+              onChange={this.handleSortChange}
+              hideHot
+              hideMostComments
+            />
+          </div>
+        </div>
+        <div className="row gx-5 gy-2 mb-3">
           {hasCommunities && (
             <Filter
               filterType="community"
@@ -596,7 +608,7 @@ export class Search extends Component<any, SearchState> {
             loading={searchCreatorLoading}
           />
         </div>
-      </div>
+      </>
     );
   }
 

From 350b1b28eeb1fd2f26e5d9c14515c9d964ba0d95 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 13:22:03 -0400
Subject: [PATCH 2/6] fix: Add bottom margin to inbox controls

---
 src/shared/components/person/inbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 982044b8..6500e961 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -382,7 +382,7 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="row g-2">
+      <div className="row g-2 mb-2">
         <div className="col-auto">{this.unreadOrAllRadios()}</div>
         <div className="col-auto">{this.messageTypeRadios()}</div>
         <div className="col-auto">

From 2c56c2e59d7dcbc6a9e35de75ca3aaa511b1268e Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 13:26:07 -0400
Subject: [PATCH 3/6] fix: Fix row gap on search options

---
 src/shared/components/search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 8a71d60e..b010fcec 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -551,7 +551,7 @@ export class Search extends Component<any, SearchState> {
 
     return (
       <>
-        <div className="row gx-2 gy-3 mb-2 mb-sm-3">
+        <div className="row g-2 mb-2 mb-sm-3">
           <div className="col-auto">
             <select
               value={type}

From 302c6b496d8e6f0ae420449c30dfdaadeae3f98b Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 13:36:00 -0400
Subject: [PATCH 4/6] fix: Fix some gaps in search filters

---
 src/shared/components/search.tsx | 39 ++++++++++++++------------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index b010fcec..c7a8cbaf 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -182,27 +182,22 @@ const Filter = ({
 }) => {
   return (
     <div className="col-sm-6">
-      <div className="row gx-2">
-        <label
-          className="col-12 col-sm-auto col-form-label flex-grow-0"
-          htmlFor={`${filterType}-filter`}
-        >
-          {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
-        </label>
-        <SearchableSelect
-          id={`${filterType}-filter`}
-          options={[
-            {
-              label: I18NextService.i18n.t("all"),
-              value: "0",
-            },
-          ].concat(options)}
-          value={value ?? 0}
-          onSearch={onSearch}
-          onChange={onChange}
-          loading={loading}
-        />
-      </div>
+      <label className="mb-1" htmlFor={`${filterType}-filter`}>
+        {capitalizeFirstLetter(I18NextService.i18n.t(filterType))}
+      </label>
+      <SearchableSelect
+        id={`${filterType}-filter`}
+        options={[
+          {
+            label: I18NextService.i18n.t("all"),
+            value: "0",
+          },
+        ].concat(options)}
+        value={value ?? 0}
+        onSearch={onSearch}
+        onChange={onChange}
+        loading={loading}
+      />
     </div>
   );
 };
@@ -588,7 +583,7 @@ export class Search extends Component<any, SearchState> {
             />
           </div>
         </div>
-        <div className="row gx-5 gy-2 mb-3">
+        <div className="row gy-2 gx-4 mb-3">
           {hasCommunities && (
             <Filter
               filterType="community"

From 93d0bc44ea8e6b13cda4a3ae0773606e2305cd99 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 13:43:28 -0400
Subject: [PATCH 5/6] fix: Simplify row classes a bit

---
 src/shared/components/person/inbox.tsx | 8 ++++----
 src/shared/components/search.tsx       | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 6500e961..294ba556 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -382,10 +382,10 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="row g-2 mb-2">
-        <div className="col-auto">{this.unreadOrAllRadios()}</div>
-        <div className="col-auto">{this.messageTypeRadios()}</div>
-        <div className="col-auto">
+      <div className="row row-cols-auto g-2 mb-2">
+        <div className="col">{this.unreadOrAllRadios()}</div>
+        <div className="col">{this.messageTypeRadios()}</div>
+        <div className="col">
           <CommentSortSelect
             sort={this.state.sort}
             onChange={this.handleSortChange}
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index c7a8cbaf..3774d0a1 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -546,8 +546,8 @@ export class Search extends Component<any, SearchState> {
 
     return (
       <>
-        <div className="row g-2 mb-2 mb-sm-3">
-          <div className="col-auto">
+        <div className="row row-cols-auto g-2 mb-2 mb-sm-3">
+          <div className="col">
             <select
               value={type}
               onChange={linkEvent(this, this.handleTypeChange)}
@@ -566,7 +566,7 @@ export class Search extends Component<any, SearchState> {
               ))}
             </select>
           </div>
-          <div className="col-auto">
+          <div className="col">
             <ListingTypeSelect
               type_={listingType}
               showLocal={showLocal(this.isoData)}
@@ -574,7 +574,7 @@ export class Search extends Component<any, SearchState> {
               onChange={this.handleListingTypeChange}
             />
           </div>
-          <div className="col-auto">
+          <div className="col">
             <SortSelect
               sort={sort}
               onChange={this.handleSortChange}

From b8c2e1e2cae82cd5b81be28b25ad7e388a48611b Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 14:42:30 -0400
Subject: [PATCH 6/6] fix: Fix up filter row gaps and margins a little

---
 src/shared/components/person/inbox.tsx | 4 ++--
 src/shared/components/search.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx
index 294ba556..28bb0716 100644
--- a/src/shared/components/person/inbox.tsx
+++ b/src/shared/components/person/inbox.tsx
@@ -238,7 +238,7 @@ export class Inbox extends Component<any, InboxState> {
             </h1>
             {this.hasUnreads && (
               <button
-                className="btn btn-secondary mb-2"
+                className="btn btn-secondary mb-2 mb-sm-3"
                 onClick={linkEvent(this, this.handleMarkAllAsRead)}
               >
                 {this.state.markAllAsReadRes.state == "loading" ? (
@@ -382,7 +382,7 @@ export class Inbox extends Component<any, InboxState> {
 
   selects() {
     return (
-      <div className="row row-cols-auto g-2 mb-2">
+      <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
         <div className="col">{this.unreadOrAllRadios()}</div>
         <div className="col">{this.messageTypeRadios()}</div>
         <div className="col">
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 3774d0a1..e9aaaa1b 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -546,7 +546,7 @@ export class Search extends Component<any, SearchState> {
 
     return (
       <>
-        <div className="row row-cols-auto g-2 mb-2 mb-sm-3">
+        <div className="row row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
           <div className="col">
             <select
               value={type}