From c35af65973499b13b8aeab5db041501bf009e295 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 18 Nov 2022 11:22:12 +0100
Subject: [PATCH] storybook

---
 .../dashboard-examine-management.stories.ts   | 19 +++++++++--
 .../views/section-view-examine-searchers.ts   | 11 ++----
 .../fields-viewer/fields-settings.element.ts  |  5 ++-
 .../fields-viewer/fields-viewer.element.ts    | 34 +++++++++++--------
 4 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/dashboard-examine-management.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/dashboard-examine-management.stories.ts
index 2a49b99e7e..3e3b5c194e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/dashboard-examine-management.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/dashboard-examine-management.stories.ts
@@ -4,12 +4,27 @@ import { html } from 'lit-html';
 import type { UmbDashboardExamineManagementElement } from './dashboard-examine-management.element';
 import './dashboard-examine-management.element';
 
+import type { UmbDashboardExamineOverviewElement } from './views/section-view-examine-overview';
+import './views/section-view-examine-overview';
+
+import type { UmbDashboardExamineIndexElement } from './views/section-view-examine-indexers';
+import './views/section-view-examine-indexers';
+
+import type { UmbDashboardExamineSearcherElement } from './views/section-view-examine-searchers';
+import './views/section-view-examine-searchers';
+
 export default {
 	title: 'Dashboards/Examine Management',
 	component: 'umb-dashboard-examine-management',
 	id: 'umb-dashboard-examine-management',
 } as Meta;
 
-export const AAAOverview: Story<UmbDashboardExamineManagementElement> = () =>
-	html` <umb-dashboard-examine-management></umb-dashboard-examine-management>`;
+export const AAAOverview: Story<UmbDashboardExamineOverviewElement> = () =>
+	html` <umb-dashboard-examine-overview></umb-dashboard-examine-overview>`;
 AAAOverview.storyName = 'Overview';
+
+export const Index: Story<UmbDashboardExamineIndexElement> = () =>
+	html` <umb-dashboard-examine-index indexName="InternalIndex"></umb-dashboard-examine-index>`;
+
+export const Searcher: Story<UmbDashboardExamineSearcherElement> = () =>
+	html` <umb-dashboard-examine-searcher searcherName="InternalSearcher"></umb-dashboard-examine-searcher>`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/views/section-view-examine-searchers.ts
index ed4a14035d..659556397e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/examine-management/views/section-view-examine-searchers.ts
@@ -8,14 +8,7 @@ import { UmbNotificationDefaultData } from '../../../../core/services/notificati
 
 import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
 
-import {
-	ApiError,
-	ProblemDetails,
-	SearchResult,
-	SearchResource,
-	Field,
-	PagedSearchResult,
-} from '@umbraco-cms/backend-api';
+import { ApiError, ProblemDetails, SearchResult, SearchResource, Field } from '@umbraco-cms/backend-api';
 
 import '../../../../core/services/modal/layouts/fields-viewer/fields-viewer.element';
 import '../../../../core/services/modal/layouts/fields-viewer/fields-settings.element';
@@ -81,7 +74,7 @@ export class UmbDashboardExamineSearcherElement extends UmbContextConsumerMixin(
 
 			.table-container uui-scroll-container {
 				padding-bottom: var(--uui-size-space-4);
-				max-width: calc(-336px + 100vw);
+				max-width: 100%;
 				overflow-x: scroll;
 				flex: 1;
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts
index fbe99cdee6..eca7095f0b 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts
@@ -29,13 +29,12 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
 			}
 
 			uui-scroll-container {
-				line-height: 0;
-				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(40px, auto));
 				overflow-y: scroll;
 				max-height: 100%;
 				min-height: 0;
+				flex: 1;
 			}
+
 			div {
 				margin-top: var(--uui-size-space-5);
 				display: flex;
diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts
index a13f76472b..de7e701314 100644
--- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts
@@ -22,10 +22,14 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
 				padding: var(--uui-size-space-5);
 				box-sizing: border-box;
 			}
+
+			span {
+				display: block;
+				padding-right: var(--uui-size-space-5);
+			}
+
 			uui-scroll-container {
 				line-height: 0;
-				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(40px, auto));
 				overflow-y: scroll;
 				max-height: 100%;
 				min-height: 0;
@@ -47,18 +51,20 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
 			return html`
 				<uui-dialog-layout class="uui-text" headline="${this.data.name}">
 					<uui-scroll-container id="field-viewer">
-						<uui-table>
-							<uui-table-head>
-								<uui-table-head-cell> Field </uui-table-head-cell>
-								<uui-table-head-cell> Value </uui-table-head-cell>
-							</uui-table-head>
-							${Object.values(this.data.fields).map((cell) => {
-								return html`<uui-table-row>
-									<uui-table-cell> ${cell.name} </uui-table-cell>
-									<uui-table-cell> ${cell.values.join(', ')} </uui-table-cell>
-								</uui-table-row>`;
-							})}
-						</uui-table>
+						<span>
+							<uui-table>
+								<uui-table-head>
+									<uui-table-head-cell> Field </uui-table-head-cell>
+									<uui-table-head-cell> Value </uui-table-head-cell>
+								</uui-table-head>
+								${Object.values(this.data.fields).map((cell) => {
+									return html`<uui-table-row>
+										<uui-table-cell> ${cell.name} </uui-table-cell>
+										<uui-table-cell> ${cell.values.join(', ')} </uui-table-cell>
+									</uui-table-row>`;
+								})}
+							</uui-table>
+						</span>
 					</uui-scroll-container>
 					<div>
 						<uui-button look="primary" @click="${this._handleClose}">Close</uui-button>