From 9fc538f886f42473514f1b329c6cce2630c440bc Mon Sep 17 00:00:00 2001
From: Peter Makowski <peter.makowski@canonical.com>
Date: Wed, 27 Mar 2024 13:10:05 +0100
Subject: [PATCH] fix: change source side panel lp#2058340 (#5377)

---
 .../FetchImagesFormFields.tsx                 |  2 +-
 .../FetchedImages/FetchedImages.tsx           | 13 ++-
 src/scss/_patterns_application.scss           | 84 ++++++++++---------
 3 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchImagesForm/FetchImagesFormFields/FetchImagesFormFields.tsx b/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchImagesForm/FetchImagesFormFields/FetchImagesFormFields.tsx
index f6fa5aa84d..c9339bde49 100644
--- a/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchImagesForm/FetchImagesFormFields/FetchImagesFormFields.tsx
+++ b/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchImagesForm/FetchImagesFormFields/FetchImagesFormFields.tsx
@@ -27,7 +27,7 @@ const FetchImagesFormFields = (): JSX.Element => {
 
   return (
     <Row>
-      <Col size={6}>
+      <Col size={12}>
         <ul className="p-inline-list">
           <li className="p-inline-list__item u-display--inline-block">
             <FormikField
diff --git a/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchedImages/FetchedImages.tsx b/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchedImages/FetchedImages.tsx
index 0987b98c67..a70c058130 100644
--- a/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchedImages/FetchedImages.tsx
+++ b/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchedImages/FetchedImages.tsx
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 
 import FormikForm from "@/app/base/components/FormikForm";
+import { useSidePanel } from "@/app/base/side-panel-context";
 import UbuntuImageSelect from "@/app/images/components/UbuntuImageSelect";
 import type { ImageValue } from "@/app/images/types";
 import { bootResourceActions } from "@/app/store/bootresource";
@@ -60,6 +61,14 @@ const FetchedImages = ({ closeForm, source }: Props): JSX.Element | null => {
   const cleanup = useCallback(() => bootResourceActions.cleanup(), []);
   const saved = previousSaving && !saving && !error;
 
+  const { setSidePanelSize } = useSidePanel();
+  useEffect(() => {
+    setSidePanelSize("large");
+    return () => {
+      setSidePanelSize("regular");
+    };
+  }, [setSidePanelSize]);
+
   useEffect(() => {
     return () => {
       dispatch(bootResourceActions.clearFetchedImages());
@@ -83,9 +92,9 @@ const FetchedImages = ({ closeForm, source }: Props): JSX.Element | null => {
 
   return (
     <>
-      <h4>
+      <p>
         Showing images fetched from <strong>{source.url || "maas.io"}</strong>
-      </h4>
+      </p>
       <hr />
       <FormikForm<FetchedImagesValues>
         allowUnchanged
diff --git a/src/scss/_patterns_application.scss b/src/scss/_patterns_application.scss
index d3f3a8b3fb..e597dbeb00 100644
--- a/src/scss/_patterns_application.scss
+++ b/src/scss/_patterns_application.scss
@@ -1,50 +1,52 @@
 @mixin maas-application {
-  .l-main {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    @media (min-width: $breakpoint-small) {
-      flex-direction: row;
-    }
-    .l-main__nav {
-      flex-shrink: 0;
-      overflow-y: auto;
-      height: 30%;
-      scrollbar-gutter: stable;
-
+  .l-application {
+    .l-main {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
       @media (min-width: $breakpoint-small) {
-        height: calc(100vh - 2.5rem);
+        flex-direction: row;
+      }
+      .l-main__nav {
+        flex-shrink: 0;
+        overflow-y: auto;
+        height: 30%;
+        scrollbar-gutter: stable;
+
+        @media (min-width: $breakpoint-small) {
+          height: calc(100vh - 2.5rem);
+        }
+      }
+      .l-main__content {
+        width: 100%;
+        overflow-y: auto;
       }
     }
-    .l-main__content {
-      width: 100%;
-      overflow-y: auto;
+    .l-aside {
+      z-index: $side-panel-z-index;
+      background-color: $color-x-light;
     }
-  }
-  .l-aside {
-    z-index: $side-panel-z-index;
-    background-color: $color-x-light;
-  }
-  // override to allow for large width aside
-  .l-aside {
-    // add width transition for transition between aside sizes
-    @include vf-transition(
-      $property: #{transform,
-      box-shadow,
-      visibility, width},
-      $duration: snap
-    );
-    @media (min-width: $breakpoint-x-small) {
-      &.is-large {
-        width: 67rem;
+    // override to allow for large width aside
+    .l-aside {
+      // add width transition for transition between aside sizes
+      @include vf-transition(
+        $property: #{transform,
+        box-shadow,
+        visibility, width},
+        $duration: snap
+      );
+      @media (min-width: $breakpoint-x-small) {
+        &.is-large {
+          width: 67rem;
+        }
       }
     }
-  }
-  .l-navigation-bar.is-pinned {
-    width: 100%;
-    display: block;
-    visibility: visible;
-    grid-area: navbar;
-    height: 3.5rem;
+    .l-navigation-bar.is-pinned {
+      width: 100%;
+      display: block;
+      visibility: visible;
+      grid-area: navbar;
+      height: 3.5rem;
+    }
   }
 }