Kamu UI 461 set a limit on the width of the screen for large screen (#481)

dmitriy-borzenko · Dmitriy Borzenko · web-flow · commit b0d319ad6852 · 2024-11-28T10:51:09.000+02:00
* Set container width

* changed CHANGELOG.md

---------

Co-authored-by: Dmitriy Borzenko &lt;borzenko@dnt-lab.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 ### Added
 - Query page: added default query after searching for first dataset
+- Set the container width for large screens
 ### Changed
 - Readme section: modified 'Run' button into a link
 - Hint extension for tile widget account
diff --git a/src/app/account/account.component.html b/src/app/account/account.component.html
@@ -1,4 +1,4 @@
-<div class="p-4 p-responsive clearfix" *ngIf="user$ | async as user">
+<div class="container-main mt-4 p-responsive clearfix" *ngIf="user$ | async as user">
     <div class="custom-container" *ngIf="activeTab$ | async as activeTab">
         <div class="container-sidebar">
             <div class="d-flex mb-3 justify-content-center align-items-center">
diff --git a/src/app/auth/settings/account-settings.component.html b/src/app/auth/settings/account-settings.component.html
@@ -1,4 +1,4 @@
-<div class="pt-4 p-responsive clearfix" *ngIf="user$ | async as user">
+<div class="pt-4 container-main p-responsive clearfix" *ngIf="user$ | async as user">
     <div class="d-md-flex align-items-center justify-content-between mt-1 mb-4">
         <div class="d-flex align-items-center mb-2 mb-md-0">
             <img
diff --git a/src/app/dataset-block/metadata-block/metadata-block.component.html b/src/app/dataset-block/metadata-block/metadata-block.component.html
@@ -23,7 +23,7 @@
         </div>
     </div>
 
-    <div class="row px-4" *ngIf="blockHash$ | async as blockHash">
+    <div class="container-main row" *ngIf="blockHash$ | async as blockHash">
         <div class="col-md-6">
             <div class="container-content mb-4">
                 <app-block-header [datasetInfo]="datasetInfo" [blockHash]="blockHash" />
diff --git a/src/app/dataset-view/additional-components/dataset-settings-component/dataset-settings.component.html b/src/app/dataset-view/additional-components/dataset-settings-component/dataset-settings.component.html
@@ -1,4 +1,4 @@
-<div class="custom-container px-4 p-responsive">
+<div class="custom-container p-responsive">
     <div class="layout-sidebar">
         <div class="pr-md-4 pr-0">
             <div>
diff --git a/src/app/dataset-view/additional-components/dataset-settings-component/tabs/general/dataset-settings-general-tab.component.html b/src/app/dataset-view/additional-components/dataset-settings-component/tabs/general/dataset-settings-general-tab.component.html
@@ -1,5 +1,5 @@
 <h2>General</h2>
-<mat-divider class="mt-1 w-75 mb-2" />
+<mat-divider class="mt-1 mb-2" />
 <form [formGroup]="renameDatasetForm">
     <dl class="form-group d-inline-block mt-3 mb-0">
         <dt class="input-label mb-2">
@@ -47,7 +47,7 @@ <h2>General</h2>
 </form>
 <div class="mt-2 margin-bottom">
     <h2>Danger Zone</h2>
-    <div class="danger-zone__content d-flex justify-content-between align-items-center w-75 mt-4">
+    <div class="danger-zone__content d-flex justify-content-between align-items-center mt-4">
         <div class="danger-zone__description">
             <p class="description">Reset this dataset</p>
             <p class="hint mt-2">
@@ -88,7 +88,7 @@ <h2>Danger Zone</h2>
         <button type="button" data-test-id="reset-dataset-button" (click)="resetDataset()">Reset this dataset</button>
     </div>
 
-    <div class="danger-zone__content d-flex justify-content-between align-items-center w-75 mt-4">
+    <div class="danger-zone__content d-flex justify-content-between align-items-center mt-4">
         <div class="danger-zone__description">
             <p class="description">Delete this dataset</p>
             <p class="hint mt-2">
diff --git a/src/app/dataset-view/dataset.component.html b/src/app/dataset-view/dataset.component.html
@@ -14,46 +14,47 @@
                 [datasetPermissions]="datasetPermissions"
                 [datasetViewType]="datasetViewType"
             />
-
-            <app-overview
-                *ngIf="datasetViewType === DatasetViewTypeEnum.Overview"
-                [datasetBasics]="datasetBasics"
-                [datasetPermissions]="datasetPermissions"
-                (selectTopicEmit)="selectTopic($event)"
-            />
-
-            <app-metadata
-                *ngIf="datasetViewType === DatasetViewTypeEnum.Metadata"
-                [datasetBasics]="datasetBasics"
-                [datasetPermissions]="datasetPermissions"
-                (pageChangeEmit)="onPageChange($event)"
-            />
-
-            <app-data
-                *ngIf="datasetViewType === DatasetViewTypeEnum.Data"
-                [datasetBasics]="datasetBasics"
-                [sqlLoading]="sqlLoading"
-                (runSQLRequestEmit)="onRunSQLRequest($event)"
-            />
-
-            <app-history
-                *ngIf="datasetViewType === DatasetViewTypeEnum.History"
-                [datasetName]="datasetBasics.name"
-                (onPageChangeEmit)="onPageChange($event)"
-            />
-
-            <app-lineage
-                *ngIf="datasetViewType === DatasetViewTypeEnum.Lineage"
-                (onClickNodeEmit)="onClickLineageNode($event)"
-            />
-
-            <app-flows *ngIf="datasetViewType === DatasetViewTypeEnum.Flows" [datasetBasics]="datasetBasics" />
-
-            <app-dataset-settings
-                *ngIf="datasetViewType === DatasetViewTypeEnum.Settings"
-                [datasetBasics]="datasetBasics"
-                [datasetPermissions]="datasetPermissions"
-            />
+            <div class="container-main">
+                <app-overview
+                    *ngIf="datasetViewType === DatasetViewTypeEnum.Overview"
+                    [datasetBasics]="datasetBasics"
+                    [datasetPermissions]="datasetPermissions"
+                    (selectTopicEmit)="selectTopic($event)"
+                />
+
+                <app-metadata
+                    *ngIf="datasetViewType === DatasetViewTypeEnum.Metadata"
+                    [datasetBasics]="datasetBasics"
+                    [datasetPermissions]="datasetPermissions"
+                    (pageChangeEmit)="onPageChange($event)"
+                />
+
+                <app-data
+                    *ngIf="datasetViewType === DatasetViewTypeEnum.Data"
+                    [datasetBasics]="datasetBasics"
+                    [sqlLoading]="sqlLoading"
+                    (runSQLRequestEmit)="onRunSQLRequest($event)"
+                />
+
+                <app-history
+                    *ngIf="datasetViewType === DatasetViewTypeEnum.History"
+                    [datasetName]="datasetBasics.name"
+                    (onPageChangeEmit)="onPageChange($event)"
+                />
+
+                <app-lineage
+                    *ngIf="datasetViewType === DatasetViewTypeEnum.Lineage"
+                    (onClickNodeEmit)="onClickLineageNode($event)"
+                />
+
+                <app-flows *ngIf="datasetViewType === DatasetViewTypeEnum.Flows" [datasetBasics]="datasetBasics" />
+
+                <app-dataset-settings
+                    *ngIf="datasetViewType === DatasetViewTypeEnum.Settings"
+                    [datasetBasics]="datasetBasics"
+                    [datasetPermissions]="datasetPermissions"
+                />
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
@@ -1,4 +1,4 @@
-<div class="app-main-container" role="main">
+<div class="app-main-container container-main" role="main">
     <div class="app-content mt-4">
         <div id="search">
             <div class="search-result-container">
diff --git a/src/styles.scss b/src/styles.scss
@@ -42,6 +42,12 @@ a {
     }
 }
 
+.container-main {
+    max-width: 1441px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
 markdown {
     line-height: normal;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="p-4 p-responsive clearfix" *ngIf="user$ \| async as user">`
	`1`	`+<div class="container-main mt-4 p-responsive clearfix" *ngIf="user$ \| async as user">`
`2`	`2`	`<div class="custom-container" *ngIf="activeTab$ \| async as activeTab">`
`3`	`3`	`<div class="container-sidebar">`
`4`	`4`	`<div class="d-flex mb-3 justify-content-center align-items-center">`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="pt-4 p-responsive clearfix" *ngIf="user$ \| async as user">`
	`1`	`+<div class="pt-4 container-main p-responsive clearfix" *ngIf="user$ \| async as user">`
`2`	`2`	`<div class="d-md-flex align-items-center justify-content-between mt-1 mb-4">`
`3`	`3`	`<div class="d-flex align-items-center mb-2 mb-md-0">`
`4`	`4`	`<img`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="custom-container px-4 p-responsive">`
	`1`	`+<div class="custom-container p-responsive">`
`2`	`2`	`<div class="layout-sidebar">`
`3`	`3`	`<div class="pr-md-4 pr-0">`
`4`	`4`	`<div>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="app-main-container" role="main">`
	`1`	`+<div class="app-main-container container-main" role="main">`
`2`	`2`	`<div class="app-content mt-4">`
`3`	`3`	`<div id="search">`
`4`	`4`	`<div class="search-result-container">`
Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,12 @@ a {`
`42`	`42`	`}`
`43`	`43`	`}`
`44`	`44`
	`45`	`+.container-main {`
	`46`	`+ max-width: 1441px;`
	`47`	`+ margin-right: auto;`
	`48`	`+ margin-left: auto;`
	`49`	`+}`
	`50`	`+`
`45`	`51`	`markdown {`
`46`	`52`	`line-height: normal;`
`47`	`53`	`}`