From d8a39aaa6f0b4d64b0bc742e766d415d943b72fa Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Thu, 16 Jan 2025 17:42:48 -0700
Subject: [PATCH 1/3] fix(app-webdir-ui): fix profile squishing

---
 .../src/WebDirectoryComponent/index.stories.js         | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js b/packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js
index c9a3ea3663..29f8935548 100644
--- a/packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js
+++ b/packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js
@@ -39,7 +39,10 @@ const filters = {
 
 export const webDirectoryExampleDepartments = args => {
   return (
+    <div className="container">
     <div className="uds-content-align">
+      <div className="row">
+        <div className="col-md-6">
       <WebDirectory
         searchType="departments"
         deptIds="1349,1353,32397,1518,1520,3534,1350,334996,1504,2000,2003,159390"
@@ -50,12 +53,16 @@ export const webDirectoryExampleDepartments = args => {
         alphaFilter={args.alphaFilter}
         // appPathFolder="/my/custom/path/to/component/root/example"
       />
+      </div>
+      </div>
+    </div>
     </div>
   );
 };
 
 export const webDirectoryExamplePeople = args => {
   return (
+    <div className="container">
     <div className="uds-content-align">
       <WebDirectory
         searchType="people"
@@ -67,11 +74,13 @@ export const webDirectoryExamplePeople = args => {
         // appPathFolder="/my/custom/path/to/component/root/example"
       />
     </div>
+    </div>
   );
 };
 
 export const webDirectoryExampleDepartmentsAndPeople = args => {
   return (
+    <div className="container">
     <div className="uds-content-align">
       <WebDirectory
         searchType="people_departments"
@@ -83,5 +92,6 @@ export const webDirectoryExampleDepartmentsAndPeople = args => {
         // appPathFolder="/my/custom/path/to/component/root/example"
       />
     </div>
+    </div>
   );
 };

From a53688f022c35b7e33fe706360da150fe115b597 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Thu, 16 Jan 2025 17:43:16 -0700
Subject: [PATCH 2/3] fix(unity-bootstrap-theme): fix profile squishing grid
 view

---
 .../src/scss/extends/_person-profile.scss                    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss b/packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss
index cbe74ede63..9b6240dfe6 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss
@@ -126,12 +126,13 @@ Desktop styles
       margin-bottom: 16px;
       .profile-img-placeholder {
         width: var(--grid-pic-size);
-        height: var(--grid-pic-size);
+        height: fit-content;
         max-width: 100%;
         .profile-img {
           width: var(--grid-pic-size);
-          height: var(--grid-pic-size);
           max-width: 100%;
+          height: auto;
+          aspect-ratio: 1 / 1;
         }
       }
     }

From ae130440821a0ed47ec972b69b75289827fb54e9 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Fri, 17 Jan 2025 10:25:24 -0700
Subject: [PATCH 3/3] docs(app-webdir-ui): add 50% column view storybook

---
 .../WebDirectoryComponent/index.stories.js    | 79 ++++++++++---------
 1 file changed, 43 insertions(+), 36 deletions(-)

diff --git a/packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js b/packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js
index 29f8935548..18bd029d24 100644
--- a/packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js
+++ b/packages/app-webdir-ui/src/WebDirectoryComponent/index.stories.js
@@ -11,6 +11,11 @@ export default {
       control: "select",
       options: ["true", "false"],
     },
+    columnView: {
+      control: "select",
+      options: ["50%"],
+      description: "50% mimics the webspark 2 column layout",
+    },
   },
   args: { alphaFilter: "false" },
   decorators: [story => <FullLayout>{story()}</FullLayout>],
@@ -39,59 +44,61 @@ const filters = {
 
 export const webDirectoryExampleDepartments = args => {
   return (
-    <div className="container">
     <div className="uds-content-align">
       <div className="row">
-        <div className="col-md-6">
-      <WebDirectory
-        searchType="departments"
-        deptIds="1349,1353,32397,1518,1520,3534,1350,334996,1504,2000,2003,159390"
-        API_URL="https://test-asu-isearch.ws.asu.edu"
-        searchApiVersion="/api/v1/"
-        filters={filters}
-        display={{...display, grid: "true"}}
-        alphaFilter={args.alphaFilter}
-        // appPathFolder="/my/custom/path/to/component/root/example"
-      />
-      </div>
+        <div className={args.columnView === "50%" ? "col-md-6" : ""}>
+          <WebDirectory
+            searchType="departments"
+            deptIds="1349,1353,32397,1518,1520,3534,1350,334996,1504,2000,2003,159390"
+            API_URL="https://test-asu-isearch.ws.asu.edu"
+            searchApiVersion="/api/v1/"
+            filters={filters}
+            display={{ ...display, grid: "false" }}
+            alphaFilter={args.alphaFilter}
+            // appPathFolder="/my/custom/path/to/component/root/example"
+          />
+        </div>
       </div>
     </div>
-    </div>
   );
 };
 
 export const webDirectoryExamplePeople = args => {
   return (
-    <div className="container">
     <div className="uds-content-align">
-      <WebDirectory
-        searchType="people"
-        ids="mcrow:454517,mdenke:1350,jagarc50:1350,lhillzev:1353"
-        API_URL="https://test-asu-isearch.ws.asu.edu"
-        searchApiVersion="/api/v1/"
-        display={display}
-        alphaFilter={args.alphaFilter}
-        // appPathFolder="/my/custom/path/to/component/root/example"
-      />
-    </div>
+      <div className="row">
+        <div className={args.columnView === "50%" ? "col-md-6" : ""}>
+          <WebDirectory
+            searchType="people"
+            ids="mcrow:454517,mdenke:1350,jagarc50:1350,lhillzev:1353"
+            API_URL="https://test-asu-isearch.ws.asu.edu"
+            searchApiVersion="/api/v1/"
+            display={display}
+            alphaFilter={args.alphaFilter}
+            // appPathFolder="/my/custom/path/to/component/root/example"
+          />
+        </div>
+      </div>
     </div>
   );
 };
 
 export const webDirectoryExampleDepartmentsAndPeople = args => {
   return (
-    <div className="container">
     <div className="uds-content-align">
-      <WebDirectory
-        searchType="people_departments"
-        ids=",tgrandli:1344,mcrow:1343,jcunnin8:1358,ccherrer:1358,csmudde:1358"
-        API_URL="https://test-asu-isearch.ws.asu.edu"
-        searchApiVersion="/api/v1/"
-        display={display}
-        alphaFilter={args.alphaFilter}
-        // appPathFolder="/my/custom/path/to/component/root/example"
-      />
-    </div>
+      <div className="row">
+        <div className={args.columnView === "50%" ? "col-md-6" : ""}>
+          <WebDirectory
+            searchType="people_departments"
+            ids=",tgrandli:1344,mcrow:1343,jcunnin8:1358,ccherrer:1358,csmudde:1358"
+            API_URL="https://test-asu-isearch.ws.asu.edu"
+            searchApiVersion="/api/v1/"
+            display={display}
+            alphaFilter={args.alphaFilter}
+            // appPathFolder="/my/custom/path/to/component/root/example"
+          />
+        </div>
+      </div>
     </div>
   );
 };