- <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 row-cols-auto g-2 g-sm-3 mb-2 mb-sm-3">
+ <div className="col">
+ <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">
+ <ListingTypeSelect
+ type_={listingType}
+ showLocal={showLocal(this.isoData)}
+ showSubscribed
+ onChange={this.handleListingTypeChange}
+ />
+ </div>
+ <div className="col">
+ <SortSelect
+ sort={sort}
+ onChange={this.handleSortChange}
+ hideHot
+ hideMostComments
+ />
+ </div>
+ </div>
+ <div className="row gy-2 gx-4 mb-3">