fix(serviceAdminBoard): detail page responsiveness (eclipse-tractusx#…

…1112)

CHANGELOG.md

@@ -7,13 +7,14 @@
 - **Service Release Process**
   - Updated description regex & validation error message to prevent only spaces in short & long description
 - **OSP Consent form**
-  - Display invited company name in OSP consent form (Previously hard coded with 'BMW') [#1083](https://github.com/eclipse-tractusx/portal-frontend/pull/1083)
   - Fixed missing street number in form [#1081](https://github.com/eclipse-tractusx/portal-frontend/issues/1081)
 - **App and Service Admin board**
   - Fix data disappearing issue on re-clicking active tab/filter in app/service admin board [#1100](https://github.com/eclipse-tractusx/portal-frontend/pull/1100)
 - **App & Service Subcription Managment**
   - Search place holder text updated
   - Show only available offer names at the top
+- **Admin Service Management**
+  - Resolved service title overlap and improved responsiveness on the admin service detail page [#1112](https://github.com/eclipse-tractusx/portal-frontend/pull/1112)
 
 ## Unreleased 2.2.0-RC3
 
@@ -57,6 +58,7 @@
 - **Technical User Management**
   - Display technicalUserManagement button based on role validation [#1073](https://github.com/eclipse-tractusx/portal-frontend/pull/1073)
 - **OSP Consent form**
+  - Display invited company name in OSP consent form (Previously hard coded with 'BMW') [#1083](https://github.com/eclipse-tractusx/portal-frontend/pull/1083)
   - Fix OSP consent form 400 submission error [#1102](https://github.com/eclipse-tractusx/portal-frontend/pull/1102/files)
 - **Use Case participation**
   - Removes use cases without verified credentials from the "Use Case Participation" list [#1088](https://github.com/eclipse-tractusx/portal-frontend/pull/1088)

src/components/pages/AdminBoardDetail/AdminBoardDetail.scss

@@ -17,34 +17,56 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
+
+@import 'src/components/styles/_breakpoints';
+@import 'src/components/styles/_colors';
+
 .service-admin-board-detail {
-  min-width: 1440px;
+  max-width: 1000px;
+  margin: 60px auto 0;
+  width: calc(100% - 40px);
+
+  @include media-breakpoint-up(xxl-sm) {
+    margin-top: 0;
+    width: 100%;
+  }
+
   .service-back {
     height: 140px;
-    padding: 48px 256px 48px 160px;
+    padding: 48px 0px;
+    @include media-breakpoint-up(xxl-sm) {
+      margin-left: -75px;
+    }
   }
   .service-content {
-    padding: 0px 256px 0px 256px;
     .divider-height {
       height: 39px;
     }
     .service-board-header {
-      width: 928px;
-      height: 288px;
       display: flex;
       flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: 48px;
+
+      @include media-breakpoint-up(lg) {
+        min-width: 928px;
+        height: 288px;
+        gap: 56px;
+      }
+
       .lead-image > img {
         border-radius: 16px;
+        max-width: 100%;
         width: 412px;
-        height: 288px;
       }
       .service-app-content {
-        padding: 68px 0 68px 56px;
+        flex: 1;
       }
     }
     .service-documents {
       padding: 10px 18px;
-      color: #0f71cb !important;
+      color: color('primary') !important;
       display: flex;
     }
     .document-button-link {
@@ -54,7 +76,7 @@
       cursor: pointer;
       line-height: 20px;
       padding: 0;
-      color: #0f71cb !important;
+      color: color('primary') !important;
     }
   }
 }

src/components/styles/_breakpoints.scss

@@ -24,6 +24,7 @@ $breakpoints: (
   md: 627px,
   lg: 1056px,
   xl: 1312px,
+  xxl-sm: 1500px,
   xxl: 1584px,
 );