From 6661363e2088ba5956a2164abaf0683a8dd24ad3 Mon Sep 17 00:00:00 2001
From: Yoichiro <yoichiro@eisbahn.jp>
Date: Sat, 25 Nov 2023 14:20:21 +0900
Subject: [PATCH] Adjust the design of the catalog search page.

---
 src/components/catalog/search/CatalogSearch.scss    |  2 +-
 src/components/catalog/search/CatalogSearch.tsx     |  4 ++--
 src/components/catalog/search/CatalogSearchForm.tsx | 11 +++++++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/catalog/search/CatalogSearch.scss b/src/components/catalog/search/CatalogSearch.scss
index b856ec09..1873c334 100644
--- a/src/components/catalog/search/CatalogSearch.scss
+++ b/src/components/catalog/search/CatalogSearch.scss
@@ -3,7 +3,7 @@
 .catalog-search-wrapper {
   position: relative;
   width: 100%;
-  max-width: 960px;
+  //max-width: 960px;
   z-index: 1;
   display: flex;
   flex-direction: column;
diff --git a/src/components/catalog/search/CatalogSearch.tsx b/src/components/catalog/search/CatalogSearch.tsx
index 4d6d802c..a9de57e3 100644
--- a/src/components/catalog/search/CatalogSearch.tsx
+++ b/src/components/catalog/search/CatalogSearch.tsx
@@ -93,7 +93,7 @@ class CatalogSearch extends React.Component<
             className="catalog-search-container"
             ref={this.state.containerRef}
           >
-            <Grid container>
+            <Grid container sx={{ maxWidth: '960px' }}>
               <Grid item sm={3} xs={12}>
                 {this.state.isSmallDisplay ? (
                   <Grid container>
@@ -149,7 +149,7 @@ class CatalogSearch extends React.Component<
 
 export default CatalogSearch;
 
-const SEARCH_RESULT_KEYBOARD_COUNT_PER_PAGE = 5;
+const SEARCH_RESULT_KEYBOARD_COUNT_PER_PAGE = 4;
 
 type SearchResultProps = {
   definitionDocuments: IKeyboardDefinitionDocument[];
diff --git a/src/components/catalog/search/CatalogSearchForm.tsx b/src/components/catalog/search/CatalogSearchForm.tsx
index 64c1e5b3..eb803f89 100644
--- a/src/components/catalog/search/CatalogSearchForm.tsx
+++ b/src/components/catalog/search/CatalogSearchForm.tsx
@@ -180,6 +180,7 @@ export default class CatalogSearchForm extends React.Component<
             value={this.props.keyword}
             onChange={this.onChangeKeyword.bind(this)}
             onKeyDown={this.onKeyDownKeyword.bind(this)}
+            size="small"
           />
         </div>
         <div className="catalog-search-condition">
@@ -192,6 +193,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Organization"
               value={this.props.organizationId || '---'}
               onChange={this.onChangeOrganizationId.bind(this)}
+              size="small"
             >
               <MenuItem key="catalog-search-organization-undefined" value="---">
                 ---
@@ -217,6 +219,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Number of Keys"
               value={this.getFeatureValue(ALL_KEY_COUNT_TYPE)}
               onChange={this.onChangeKeyCount.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="over_100">Over 100%</MenuItem>
@@ -240,6 +243,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Integrated/Split"
               value={this.getFeatureValue(ALL_SPLIT_TYPE)}
               onChange={this.onChangeSplitType.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="integrated">Integrated</MenuItem>
@@ -255,6 +259,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Staggered"
               value={this.getFeatureValue(ALL_STAGGERED_TYPE)}
               onChange={this.onChangeStaggeredType.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="row_staggered">Row Staggered</MenuItem>
@@ -273,6 +278,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Lighting"
               value={this.getFeatureValue(ALL_LED_TYPE)}
               onChange={this.onChangeLedType.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="backlight">Backlight</MenuItem>
@@ -288,6 +294,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Key Switch"
               value={this.getFeatureValue(ALL_KEY_SWITCH_TYPE)}
               onChange={this.onChangeKeySwitchType.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="cherry_mx">Cherry MX Compatible</MenuItem>
@@ -310,6 +317,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Hot Swap"
               value={this.getFeatureValue(ALL_HOTSWAP_TYPE)}
               onChange={this.onChangeHotswapType.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="hot_swap">Supported</MenuItem>
@@ -324,6 +332,7 @@ export default class CatalogSearchForm extends React.Component<
               label="OLED"
               value={this.getFeatureValue(ALL_OLED_TYPE)}
               onChange={this.onChangeOledType.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="oled">Supported</MenuItem>
@@ -338,6 +347,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Speaker"
               value={this.getFeatureValue(ALL_SPEAKER_TYPE)}
               onChange={this.onChangeSpeakerType.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="speaker">Supported</MenuItem>
@@ -352,6 +362,7 @@ export default class CatalogSearchForm extends React.Component<
               label="Wireless"
               value={this.getFeatureValue(ALL_WIRELESS_TYPE)}
               onChange={this.onChangeWirelessType.bind(this)}
+              size="small"
             >
               <MenuItem value="---">---</MenuItem>
               <MenuItem value="wireless">Supported</MenuItem>