SONAR-9583 use fixed width on web api page (#2347)

diff --git a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.js b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.js
index ecd167948dca74a21deb0a9693e4ee1a27cff32f..186bda54c7a456b1311ec2392d72f691a2a9eec5 100644 (file)
--- a/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.js
+++ b/server/sonar-web/src/main/js/apps/web-api/components/WebApiApp.js
@@ -144,43 +144,51 @@ export default class WebApiApp extends React.PureComponent {
     const domain = domains.find(domain => isDomainPathActive(domain.path, splat));
 
     return (
-      <div className="search-navigator sticky">
+      <div className="layout-page">
         <Helmet title={translate('api_documentation.page')} />
-        <div className="search-navigator-side search-navigator-side-light" style={{ top: 30 }}>
-          <div className="web-api-page-header">
-            <Link to="/web_api/">
-              <h1>
-                {translate('api_documentation.page')}
-              </h1>
-            </Link>
+        <div className="layout-page-side-outer">
+          <div className="layout-page-side" style={{ top: 30 }}>
+            <div className="layout-page-side-inner">
+              <div className="layout-page-filters">
+                <div className="web-api-page-header">
+                  <Link to="/web_api/">
+                    <h1>
+                      {translate('api_documentation.page')}
+                    </h1>
+                  </Link>
+                </div>
+
+                <Search
+                  showDeprecated={showDeprecated}
+                  showInternal={showInternal}
+                  onSearch={this.handleSearch}
+                  onToggleInternal={this.handleToggleInternal}
+                  onToggleDeprecated={this.handleToggleDeprecated}
+                />
+
+                <Menu
+                  domains={this.state.domains}
+                  showDeprecated={showDeprecated}
+                  showInternal={showInternal}
+                  searchQuery={searchQuery}
+                  splat={splat}
+                />
+              </div>
+            </div>
           </div>
-
-          <Search
-            showDeprecated={showDeprecated}
-            showInternal={showInternal}
-            onSearch={this.handleSearch}
-            onToggleInternal={this.handleToggleInternal}
-            onToggleDeprecated={this.handleToggleDeprecated}
-          />
-
-          <Menu
-            domains={this.state.domains}
-            showDeprecated={showDeprecated}
-            showInternal={showInternal}
-            searchQuery={searchQuery}
-            splat={splat}
-          />
         </div>
 
-        <div className="search-navigator-workspace">
-          {domain &&
-            <Domain
-              key={domain.path}
-              domain={domain}
-              showDeprecated={showDeprecated}
-              showInternal={showInternal}
-              searchQuery={searchQuery}
-            />}
+        <div className="layout-page-main">
+          <div className="layout-page-main-inner">
+            {domain &&
+              <Domain
+                key={domain.path}
+                domain={domain}
+                showDeprecated={showDeprecated}
+                showInternal={showInternal}
+                searchQuery={searchQuery}
+              />}
+          </div>
         </div>
       </div>
     );

diff --git a/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css b/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css
index 121d9b55a353ba33364a9244804fdf31ab4f0721..627ac47564ecff493a006279bfe3b1060878a63d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css
+++ b/server/sonar-web/src/main/js/apps/web-api/styles/web-api.css
@@ -6,16 +6,13 @@
   margin: 20px 10px 0;
   padding: 0 10px 20px;
   border-bottom: 1px solid #e6e6e6;
+  white-space: nowrap;
 }
 
 .web-api-search .icon-search {
   color: #cdcdcd;
 }
 
-.web-api-domain {
-  padding: 10px 20px;
-}
-
 .web-api-domain-header,
 .web-api-action-header {
   display: flex;