fix landing page and safari 16 (#688)

b310-digital · Jan 30, 2025 · 169e9d9 · 169e9d9
1 parent 85916e1
commit 169e9d9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/teammapper-frontend/.browserslistrc b/teammapper-frontend/.browserslistrc
@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.dev/reference/versions#browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 3 Safari major versions
+last 2 iOS major versions
+last 2 Android major versions
+Firefox ESR
diff --git a/teammapper-frontend/src/app/modules/about/components/jumbotron/jumbotron.component.html b/teammapper-frontend/src/app/modules/about/components/jumbotron/jumbotron.component.html
@@ -1,5 +1,5 @@
 <section class="jumbotron">
-  <div>
+  <div class="m-2">
     <h1>
       <img src="./assets/icons/teammapper.svg" alt="Teammapper Logo" /><br />
       TeamMapper
@@ -10,39 +10,39 @@ <h1>
       </p>
       <br />
       <mat-list>
-        <mat-list-item>
+        <mat-list-item lines="3">
           <mat-icon mat-list-icon>check</mat-icon>
           <span class="white-list">
             {{
               'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.0' | translate
             }}
           </span>
         </mat-list-item>
-        <mat-list-item>
+        <mat-list-item lines="3">
           <mat-icon mat-list-icon>check</mat-icon>
           <span class="white-list">
             {{
               'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.1' | translate
             }}
           </span>
         </mat-list-item>
-        <mat-list-item>
+        <mat-list-item lines="3">
           <mat-icon mat-list-icon>check</mat-icon>
           <span class="white-list">
             {{
               'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.2' | translate
             }}
           </span>
         </mat-list-item>
-        <mat-list-item>
+        <mat-list-item lines="3">
           <mat-icon mat-list-icon>check</mat-icon>
           <span class="white-list">
             {{
               'PAGES.ABOUT.INTRODUCTION.APPLICATION_PROPERTIES.3' | translate
             }}
           </span>
         </mat-list-item>
-        <mat-list-item>
+        <mat-list-item lines="3">
           <mat-icon mat-list-icon>check</mat-icon>
           <span class="white-list">
             {{

diff --git a/teammapper-frontend/src/app/modules/about/components/jumbotron/jumbotron.component.scss b/teammapper-frontend/src/app/modules/about/components/jumbotron/jumbotron.component.scss
@@ -1,12 +1,16 @@
 @use '@angular/material' as mat;
 @import 'src/theme.scss';
 
+.m-2 {
+  margin: 2rem;
+}
+
 section.jumbotron {
   background-color: mat.m2-get-color-from-palette($app-primary);
   padding: 100px 0 40px 0;
   text-align: center;
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: center;
   flex-wrap: wrap;
 
@@ -17,6 +21,7 @@ section.jumbotron {
     word-wrap: break-word !important;
     white-space: pre-wrap !important;
     line-height: 150%;
+    overflow-wrap: break-word !important;
   }
 
   > div {
@@ -32,9 +37,10 @@ section.jumbotron {
       > mat-list {
         text-align: left;
         margin-bottom: 10px;
+        max-width: 100%;
 
-        mat-list-item {
-          height: 30px;
+        .mdc-list-item {
+          height: auto;
         }
 
         mat-icon {
@@ -64,7 +70,7 @@ section.jumbotron {
     }
 
     > img {
-      max-width: 500px;
+      max-width: 400px;
       width: 100%;
     }
   }