From 05ed811071780cc06720a7e4ecfa93857bb43264 Mon Sep 17 00:00:00 2001
From: Joao Rua <joao.rua@4all-software.com>
Date: Wed, 24 Jul 2024 13:04:26 +0100
Subject: [PATCH] webapp page are now responsive

=> page structures will change based on the screen size
---
 .../Common/DataItemDetailsComponent.razor     |   4 +-
 .../Common/DataItemDetailsComponent.razor.cs  |   6 +
 .../Common/DataItemDetailsComponent.razor.css |   6 -
 .../CommonFileStoresTable.razor               |   4 +-
 .../DomainFileStoresTable.razor               |   6 +-
 .../EngineeringModel/OptionsTable.razor       |   6 +-
 .../ModelEditor/ElementDefinitionTable.razor  | 118 +++++++++---------
 .../ParameterEditor/ParameterTable.razor.css  |   2 +-
 .../Categories/CategoriesTable.razor          |   6 +-
 .../MeasurementScalesTable.razor              |   6 +-
 .../MeasurementUnitsTable.razor               |   4 +-
 .../ParameterTypes/ParameterTypeTable.razor   |   7 +-
 .../DomainsOfExpertiseTable.razor             |   4 +-
 .../EngineeringModelsTable.razor              |   6 +-
 .../SiteDirectory/OrganizationsTable.razor    |   4 +-
 .../Roles/ParticipantRolesTable.razor         |   6 +-
 .../Roles/PersonRolesTable.razor              |   6 +-
 .../UserManagement/UserManagementTable.razor  |   6 +-
 .../Tabs/TabsPanelComponent.razor.css         |   3 +-
 COMETwebapp/Pages/_Host.cshtml                |   2 +-
 COMETwebapp/wwwroot/css/app.css               |  25 ++++
 21 files changed, 130 insertions(+), 107 deletions(-)

diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor
index 23479e20..8448bcc8 100644
--- a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor
+++ b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor
@@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 
 @namespace COMETwebapp.Components.Common
 
-<div class="ps-3 data-items-panel-container" style="width: @this.Width;">
+<div class="data-items-panel-container @(this.CssClass)" style="width: @this.Width;">
     <div class="data-item-details-section">
         @if (this.IsSelected)
         {
@@ -43,4 +43,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
             </div>
         }
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs
index 7fb72554..bf0790b7 100644
--- a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs
+++ b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs
@@ -66,5 +66,11 @@ public partial class DataItemDetailsComponent
         /// </summary>
         [Parameter]
         public string Width { get; set; } = "50%";
+
+        /// <summary>
+        /// The custom css class to be used in the container component
+        /// </summary>
+        [Parameter]
+        public string CssClass { get; set; }
     }
 }
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
index 04dc5f92..b737c6d7 100644
--- a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
+++ b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
@@ -6,12 +6,6 @@
     overflow: auto;
 }
 
-.data-items-panel-container {
-    max-height: 90vh;
-    position: sticky;
-    top: 10px;
-}
-
 .data-item-details-image {
     margin: auto;
     display: block;
diff --git a/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor b/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor
index ba1e3a15..99489778 100644
--- a/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor
+++ b/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor
@@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDataItemBase<CommonFileStore, CommonFileStoreRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -32,7 +32,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(CommonFileStoreRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(CommonFileStoreRowViewModel.CreatedOn)" MinWidth="80" DisplayFormat="{0:dd/MM/yyyy HH:mm:ss}" SearchEnabled="false"/>
diff --git a/COMETwebapp/Components/EngineeringModel/DomainFileStore/DomainFileStoresTable.razor b/COMETwebapp/Components/EngineeringModel/DomainFileStore/DomainFileStoresTable.razor
index 1c8ecb55..f95a9bd5 100644
--- a/COMETwebapp/Components/EngineeringModel/DomainFileStore/DomainFileStoresTable.razor
+++ b/COMETwebapp/Components/EngineeringModel/DomainFileStore/DomainFileStoresTable.razor
@@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDataItemBase<DomainFileStore, DomainFileStoreRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -32,7 +32,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(DomainFileStoreRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(DomainFileStoreRowViewModel.CreatedOn)" MinWidth="80" DisplayFormat="{0:dd/MM/yyyy HH:mm:ss}" SearchEnabled="false"/>
@@ -55,4 +55,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
         <DxButton Text="Cancel " RenderStyle="ButtonRenderStyle.Success" Click="@(this.ViewModel.OnCancelPopupButtonClick)"/>
         <DxButton Text="Confirm" RenderStyle="ButtonRenderStyle.Danger" Click="@(this.OnDeletionConfirmed)"/>
     </div>
-</DxPopup>
\ No newline at end of file
+</DxPopup>
diff --git a/COMETwebapp/Components/EngineeringModel/OptionsTable.razor b/COMETwebapp/Components/EngineeringModel/OptionsTable.razor
index 09c6e199..5dd1cd09 100644
--- a/COMETwebapp/Components/EngineeringModel/OptionsTable.razor
+++ b/COMETwebapp/Components/EngineeringModel/OptionsTable.razor
@@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDataItemBase<Option, OptionRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -33,7 +33,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(OptionRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(OptionRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
@@ -57,4 +57,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
         <DxButton Text="Cancel " RenderStyle="ButtonRenderStyle.Success" Click="@(this.ViewModel.OnCancelPopupButtonClick)"/>
         <DxButton Text="Confirm" RenderStyle="ButtonRenderStyle.Danger" Click="@(this.OnDeletionConfirmed)"/>
     </div>
-</DxPopup>
\ No newline at end of file
+</DxPopup>
diff --git a/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor b/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
index 95cec68d..95e817d2 100644
--- a/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
+++ b/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
@@ -26,69 +26,69 @@
 
 <LoadingComponent IsVisible="@this.ViewModel.IsLoading">
     <ValidationMessageComponent ValidationMessage="@(this.ErrorMessage)" />
-    <div style="display: flex">
-        <div>
-            <h4>Source Model</h4>
-            <div class="model-elements-column sticky-scrollable-column">
-                <DxGrid @ref="this.SecondGrid"
-                        Data="this.ViewModel.RowsSource"
-                        ShowAllRows="true"
-                        CssClass="second-grid"
-                        AllowSort="false"
-                        RowClick="this.OnElementSelected"
-                        AllowSelectRowByClick="true"
-                        SelectionMode="GridSelectionMode.Single"
-                        VerticalScrollBarMode="ScrollBarMode.Visible"
-                        CustomizeElement="@(OnCustomizeElement)">
-                    <Columns>
-                        <DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
-                        <DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
-                        <DxGridDataColumn FieldName="@nameof(ElementDefinitionRowViewModel.IsTopElement)" Visible="false"/>
-                    </Columns>
-                </DxGrid>
+    <div class="selected-data-item-page">
+        <div class="selected-data-item-table d-flex" style="flex: 1 1 58%!important;">
+            <div>
+                <h4>Source Model</h4>
+                <div class="sticky-scrollable-column">
+                    <DxGrid @ref="this.SecondGrid"
+                            Data="this.ViewModel.RowsSource"
+                            ShowAllRows="true"
+                            CssClass="second-grid"
+                            AllowSort="false"
+                            RowClick="this.OnElementSelected"
+                            AllowSelectRowByClick="true"
+                            SelectionMode="GridSelectionMode.Single"
+                            VerticalScrollBarMode="ScrollBarMode.Visible"
+                            CustomizeElement="@(OnCustomizeElement)">
+                        <Columns>
+                            <DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
+                            <DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
+                            <DxGridDataColumn FieldName="@nameof(ElementDefinitionRowViewModel.IsTopElement)" Visible="false"/>
+                        </Columns>
+                    </DxGrid>
+                </div>
             </div>
-        </div>
-        <div style="padding-left: 10px">
-            <h4>Target Model</h4>
-            <div class="model-elements-column sticky-scrollable-column">
-                <DxGrid @ref="this.FirstGrid"
-                        Data="this.ViewModel.RowsTarget"
-                        ShowAllRows="true"
-                        CssClass="first-grid"
-                        AllowSort="false"
-                        RowClick="this.OnElementSelected"
-                        AllowSelectRowByClick="true"
-                        SelectionMode="GridSelectionMode.Single"
-                        VerticalScrollBarMode="ScrollBarMode.Visible"
-                        CustomizeElement="@(OnCustomizeElement)">
-                    <Columns>
-                        <DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value"/>
-                        <DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)"/>
-                    </Columns>
-                </DxGrid>
+            <div>
+                <h4>Target Model</h4>
+                <div class="sticky-scrollable-column">
+                    <DxGrid @ref="this.FirstGrid"
+                            Data="this.ViewModel.RowsTarget"
+                            ShowAllRows="true"
+                            CssClass="first-grid"
+                            AllowSort="false"
+                            RowClick="this.OnElementSelected"
+                            AllowSelectRowByClick="true"
+                            SelectionMode="GridSelectionMode.Single"
+                            VerticalScrollBarMode="ScrollBarMode.Visible"
+                            CustomizeElement="@(OnCustomizeElement)">
+                        <Columns>
+                            <DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value"/>
+                            <DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)"/>
+                        </Columns>
+                    </DxGrid>
+                </div>
             </div>
         </div>
+        <DataItemDetailsComponent IsSelected="@(this.ViewModel.SelectedElementDefinition is not null)"
+                                  NotSelectedText="Select an item to view or edit"
+                                  Width="100%"
+                                  CssClass="model-editor-details">
+            <div class="mb-2 row">
+                <h4 class="d-inline">Panel Editor</h4>
+                <div class="float-end">
+                    @if (this.ViewModel.SelectedElementDefinition is not null)
+                    {
+                        <DxButton Id="addParameter" Text="Add Parameter" IconCssClass="oi oi-plus" Click="@(this.ViewModel.OpenAddParameterPopup)"/>
+                    }
 
-        <div style="width: 1300px;">
-            <DataItemDetailsComponent IsSelected="@(this.ViewModel.SelectedElementDefinition is not null)"
-                                      NotSelectedText="Select an item to view or edit"
-                                      Width="100%">
-                <div class="mb-2">
-                    <h4 class="d-inline">Panel Editor</h4>
-                    <div class="float-end">
-                        @if (this.ViewModel.SelectedElementDefinition is not null)
-                        {
-                            <DxButton Id="addParameter" Text="Add Parameter" IconCssClass="oi oi-plus" Click="@(this.ViewModel.OpenAddParameterPopup)"/>
-                        }
-
-                        <DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
-                    </div>
+                    <DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
                 </div>
-                <div style="height: 73vh!important;" class="sticky-scrollable-column d-flex justify-content-between">
-                        <DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
-                </div>
-            </DataItemDetailsComponent>
-        </div>
+            </div>
+            <div style="height: 73vh!important;" class="sticky-scrollable-column d-flex justify-content-between">
+                <DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
+            </div>
+        </DataItemDetailsComponent>
     </div>
     <DxPopup CloseOnOutsideClick="false" HeaderText="Create Element Definition" @bind-Visible="@this.ViewModel.IsOnCreationMode" Width="40vw">
         <Content>
@@ -101,4 +101,4 @@
             <AddParameter ViewModel="@this.ViewModel.AddParameterViewModel"/>
         </Content>
     </DxPopup>
-</LoadingComponent>
\ No newline at end of file
+</LoadingComponent>
diff --git a/COMETwebapp/Components/ParameterEditor/ParameterTable.razor.css b/COMETwebapp/Components/ParameterEditor/ParameterTable.razor.css
index d81344c3..8ed4fa6f 100644
--- a/COMETwebapp/Components/ParameterEditor/ParameterTable.razor.css
+++ b/COMETwebapp/Components/ParameterEditor/ParameterTable.razor.css
@@ -16,7 +16,7 @@
 }
 
 .table-container {
-    min-width: 1400px;
+    width: fit-content;
     margin-top: 15px;
     max-height: 80vh;
 }
\ No newline at end of file
diff --git a/COMETwebapp/Components/ReferenceData/Categories/CategoriesTable.razor b/COMETwebapp/Components/ReferenceData/Categories/CategoriesTable.razor
index 8bb028a0..57ab713e 100644
--- a/COMETwebapp/Components/ReferenceData/Categories/CategoriesTable.razor
+++ b/COMETwebapp/Components/ReferenceData/Categories/CategoriesTable.razor
@@ -1,7 +1,7 @@
 <!------------------------------------------------------------------------------
 Copyright (c) 2023-2024 Starion Group S.A.
 
-    Authors: Justine Veirier d'aiguebonne, Sam Gerené, Alex Vorobiev, Alexander van Delft, Nabil Abbar
+    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
 
     This file is part of CDP4-COMET WEB Community Edition
      The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
@@ -22,7 +22,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDeprecatableDataItemBase<Category, CategoryRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -39,7 +39,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(CategoryRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(CategoryRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
diff --git a/COMETwebapp/Components/ReferenceData/MeasurementScales/MeasurementScalesTable.razor b/COMETwebapp/Components/ReferenceData/MeasurementScales/MeasurementScalesTable.razor
index 86d8b9fe..3f79f1b0 100644
--- a/COMETwebapp/Components/ReferenceData/MeasurementScales/MeasurementScalesTable.razor
+++ b/COMETwebapp/Components/ReferenceData/MeasurementScales/MeasurementScalesTable.razor
@@ -22,7 +22,7 @@ Copyright (c) 2024 Starion Group S.A.
 
 @inherits SelectedDeprecatableDataItemBase<MeasurementScale, MeasurementScaleRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -39,7 +39,7 @@ Copyright (c) 2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(MeasurementScaleRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(MeasurementScaleRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
@@ -59,4 +59,4 @@ Copyright (c) 2024 Starion Group S.A.
                                ShouldCreate="@(this.ShouldCreateThing)"
                                OnSaved="@(this.OnSaved)"/>
     </DataItemDetailsComponent>
-</div>
\ No newline at end of file
+</div>
diff --git a/COMETwebapp/Components/ReferenceData/MeasurementUnits/MeasurementUnitsTable.razor b/COMETwebapp/Components/ReferenceData/MeasurementUnits/MeasurementUnitsTable.razor
index 3926f80d..ade1d3a7 100644
--- a/COMETwebapp/Components/ReferenceData/MeasurementUnits/MeasurementUnitsTable.razor
+++ b/COMETwebapp/Components/ReferenceData/MeasurementUnits/MeasurementUnitsTable.razor
@@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDeprecatableDataItemBase<MeasurementUnit, MeasurementUnitRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -34,7 +34,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(MeasurementUnitRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(MeasurementUnitRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
diff --git a/COMETwebapp/Components/ReferenceData/ParameterTypes/ParameterTypeTable.razor b/COMETwebapp/Components/ReferenceData/ParameterTypes/ParameterTypeTable.razor
index 276cb54f..41398f3a 100644
--- a/COMETwebapp/Components/ReferenceData/ParameterTypes/ParameterTypeTable.razor
+++ b/COMETwebapp/Components/ReferenceData/ParameterTypes/ParameterTypeTable.razor
@@ -17,8 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDeprecatableDataItemBase<ParameterType, ParameterTypeRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
-
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -35,7 +34,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(ParameterTypeRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(ParameterTypeRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
@@ -53,7 +52,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
             <ParameterTypeForm ViewModel="@(this.ViewModel)"
                                @bind-IsVisible="@(this.IsOnEditMode)"
                                ShouldCreate="@(this.ShouldCreateThing)"
-                               OnSaved="@(this.OnSaved)" />
+                               OnSaved="@(this.OnSaved)"/>
         </DataItemDetailsComponent>
     </div>
 </LoadingComponent>
diff --git a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor
index e514c906..6cdb6e7b 100644
--- a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor
@@ -18,7 +18,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDeprecatableDataItemBase<DomainOfExpertise, DomainOfExpertiseRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -35,7 +35,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new int[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
diff --git a/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor b/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor
index 067f79e6..ee155472 100644
--- a/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor
@@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDataItemBase<EngineeringModelSetup, EngineeringModelRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div style="display: flex; justify-content: space-between;">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -33,7 +33,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(EngineeringModelRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(EngineeringModelRowViewModel.ShortName)" MinWidth="80"/>
@@ -58,4 +58,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
         <DxButton Text="Cancel " RenderStyle="ButtonRenderStyle.Success" Click="@(this.ViewModel.OnCancelPopupButtonClick)"/>
         <DxButton Text="Confirm" RenderStyle="ButtonRenderStyle.Danger" Click="@(this.OnDeletionConfirmed)"/>
     </div>
-</DxPopup>
\ No newline at end of file
+</DxPopup>
diff --git a/COMETwebapp/Components/SiteDirectory/OrganizationsTable.razor b/COMETwebapp/Components/SiteDirectory/OrganizationsTable.razor
index bc08e9a1..6bc447c7 100644
--- a/COMETwebapp/Components/SiteDirectory/OrganizationsTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/OrganizationsTable.razor
@@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits COMETwebapp.Components.Common.SelectedDeprecatableDataItemBase<CDP4Common.SiteDirectoryData.Organization, OrganizationRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -34,7 +34,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new int[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(OrganizationRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(OrganizationRowViewModel.ShortName)" MinWidth="80" />
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
index 50ac15ba..0f41505e 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
@@ -21,7 +21,7 @@ Copyright (c) 2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDeprecatableDataItemBase<ParticipantRole, ParticipantRoleRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -38,7 +38,7 @@ Copyright (c) 2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.ShortName)" MinWidth="80"/>
@@ -54,4 +54,4 @@ Copyright (c) 2024 Starion Group S.A.
                              ShouldCreate="@(this.ShouldCreateThing)"
                              OnSaved="@(this.OnSaved)"/>
     </DataItemDetailsComponent>
-</div>
\ No newline at end of file
+</div>
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
index 58dd4f18..70edb9b7 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
@@ -21,7 +21,7 @@ Copyright (c) 2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDeprecatableDataItemBase<PersonRole, PersonRoleRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -38,7 +38,7 @@ Copyright (c) 2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.ShortName)" MinWidth="80"/>
@@ -54,4 +54,4 @@ Copyright (c) 2024 Starion Group S.A.
                         ShouldCreate="@(this.ShouldCreateThing)"
                         OnSaved="@(this.OnSaved)"/>
     </DataItemDetailsComponent>
-</div>
\ No newline at end of file
+</div>
diff --git a/COMETwebapp/Components/SiteDirectory/UserManagement/UserManagementTable.razor b/COMETwebapp/Components/SiteDirectory/UserManagement/UserManagementTable.razor
index 7f45ed72..bae98050 100644
--- a/COMETwebapp/Components/SiteDirectory/UserManagement/UserManagementTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/UserManagement/UserManagementTable.razor
@@ -22,7 +22,7 @@
 @inherits SelectedDeprecatableDataItemBase<Person, PersonRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -41,7 +41,7 @@
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
                 CustomSummary="CustomSummary"
                 CustomizeSummaryDisplayText="CustomizeSummaryDisplayText"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <TotalSummary>
                 <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="IsActive" ValueDisplayFormat="{0} Total"/>
                 <DxGridSummaryItem SummaryType="GridSummaryItemType.Custom" Name="Inactive" FieldName="IsActive"/>
@@ -77,4 +77,4 @@
                                 OnSaved="@(this.OnSaved)"/>
         </DataItemDetailsComponent>
     </div>
-</LoadingComponent>
\ No newline at end of file
+</LoadingComponent>
diff --git a/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css b/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css
index 86083126..2aeae5eb 100644
--- a/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css
+++ b/COMETwebapp/Components/Tabs/TabsPanelComponent.razor.css
@@ -3,11 +3,10 @@
     border-bottom: solid 1px var(--colors-gray-100);
     padding: 16px;
     border-radius: 24px 0px 0px 0px;
-    min-width: 60vw;
+    overflow: auto;
 }
 
 #tabs-page-content {
-    min-width: 60vw;
 }
 
 .panel-view {
diff --git a/COMETwebapp/Pages/_Host.cshtml b/COMETwebapp/Pages/_Host.cshtml
index c088a830..b5d85f98 100644
--- a/COMETwebapp/Pages/_Host.cshtml
+++ b/COMETwebapp/Pages/_Host.cshtml
@@ -2,7 +2,7 @@
 <!------------------------------------------------------------------------------
 // Copyright (c) 2023-2024 Starion Group S.A.
 //
-//   Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, Nabil Abbar
+//   Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
 //
 //   This file is part of CDP4-COMET WEB Community Edition
 //   The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25
diff --git a/COMETwebapp/wwwroot/css/app.css b/COMETwebapp/wwwroot/css/app.css
index 7ed23be5..59607a42 100644
--- a/COMETwebapp/wwwroot/css/app.css
+++ b/COMETwebapp/wwwroot/css/app.css
@@ -265,4 +265,29 @@ sub {
 
 #tabs-page-content{
     padding-top: 16px!important;
+}
+
+.selected-data-item-page {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.selected-data-item-table {
+    flex: 1 1 63%;
+    min-width: 300px;
+    height: fit-content;
+}
+
+.data-items-panel-container {
+    max-height: 90vh;
+    position: sticky;
+    top: 10px;
+    flex: 1 1 35%;
+    min-width: 350px;
+}
+
+.model-editor-details {
+    flex: 1 1 40% !important;
 }
\ No newline at end of file