WFNEWS-2411 Adjust highlights widget container max-width for mobile (#…

…2099)

* WFNEWS-2411 Add highlights widget to dashboard

* Revert videos widget css changes

* Remove console logs

* WFBEWS-2411 Move highlights card to standalone component

* WFNEWS-2411 Only bind single post to highlight card

* Add CORS headers for calls to wordpress API

* Try with fetch API

* Add headers to fetch

* Try with CapacitorHttp

* WFNEWS-2411 Use CapacitorHttp on mobile to avoid CORS issues in highlights widget

* WFNEWS-2411 Use CapacitorHttp on mobile to avoid CORS issues in highlights widget

* Add comment

* Move CapacitorHttp get request to service class, Lint clean up

* Use HttpClient for getRequest when native platform is not in use, move to common utility service

* Remove unused imports in capacitor service

* WFNEWS-2411 Make highlights widget container wider on mobile

client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/highlights-widget/highlights-widget.component.scss

@@ -1,7 +1,9 @@
 @import "../../../../../styles/variables";
 @import "notosans-fontface/scss/notosans-fontface";
 
-:host { display: block; }
+:host {
+    display: block;
+}
 
 .container {
     overflow: hidden;
@@ -11,11 +13,18 @@
     border-radius: 20px;
     background: #fff;
     box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
-    max-width: min(1460px, calc(100dvw - 104px));
     padding: var(--24, 24px);
     flex-direction: column;
     align-items: flex-start;
     gap: var(--24, 24px);
+
+    @media (max-width: $mobile-max-width) {
+        max-width: min(1460px, calc(100dvw - 90px));
+    }
+
+    @media (min-width: $desktop-sm-min-width) {
+        max-width: min(1460px, calc(100dvw - 104px));
+    }
 }
 
 .content {