Changes to styling and responsiveness for small screens

Puzzlepart · Nov 13, 2024 · 85208b9 · 85208b9
1 parent c956d7b
commit 85208b9
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 19 deletions.
diff --git a/SharePointFramework/PortfolioWebParts/package.json b/SharePointFramework/PortfolioWebParts/package.json
@@ -66,7 +66,8 @@
     "@fluentui/react-datepicker-compat": "~0.4.38",
     "@fluentui/react-motion-preview": "~0.5.20",
     "@fluentui/react-nav-preview": "~0.9.1",
-    "react-gauge-component": "~1.2.61"
+    "react-gauge-component": "~1.2.61",
+    "@fluentui/react-motion-components-preview": "~0.3.0"
   },
   "devDependencies": {
     "@microsoft/eslint-config-spfx": "1.17.4",

diff --git a/SharePointFramework/PortfolioWebParts/src/components/IdeaModule/IdeaModule.module.scss b/SharePointFramework/PortfolioWebParts/src/components/IdeaModule/IdeaModule.module.scss
@@ -9,9 +9,9 @@
     padding: 16px 32px;
     gap: 16px;
     display: grid;
-    justify-content: flex-start;
     align-items: flex-start;
     height: fit-content;
+    width: 100%;
 
     .ideaHeader {
       display: flex;
@@ -21,12 +21,12 @@
       .toolbar {
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        align-items: center;
         gap: 16px;
 
         .hamburger {
           position: absolute;
+          z-index: 2;
+          top: 5px;
           left: 32px;
         }
       }
@@ -41,7 +41,7 @@
 
     .idea {
       display: grid;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
       grid-gap: 16px;
       margin-bottom: 16px;
 
@@ -55,7 +55,7 @@
       flex-direction: column;
       padding: 16px 32px;
       border-radius: var(--borderRadiusXLarge);
-      margin: 0 32px;
+      width: fit-content;
 
       .ideaTitle {
         font-size: 1rem;
@@ -66,9 +66,14 @@
       .status {
         display: flex;
         justify-content: flex-start;
+        flex-wrap: wrap;
         flex-direction: row;
         gap: 32px;
         margin-bottom: 16px;
+
+        .field {
+          max-width: 620px;
+        }
       }
     }
   }

diff --git a/SharePointFramework/PortfolioWebParts/src/components/IdeaModule/IdeaModule.tsx b/SharePointFramework/PortfolioWebParts/src/components/IdeaModule/IdeaModule.tsx
@@ -115,7 +115,9 @@ export const IdeaModule: FC<IIdeaModuleProps> = (props) => {
           {fieldValues
             .filter((model) => model.internalName.includes(filterKey))
             .map((model, idx) => (
-              <IdeaField key={idx} model={model} />
+              <div className={styles.field} key={idx}>
+                <IdeaField key={idx} model={model} />
+              </div>
             ))}
         </div>
       </div>

diff --git a/...amework/PortfolioWebParts/src/components/IdeaModule/IdeaPhaseBar/IdeaPhaseBar.module.scss b/...amework/PortfolioWebParts/src/components/IdeaModule/IdeaPhaseBar/IdeaPhaseBar.module.scss
@@ -2,5 +2,6 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center
+  align-items: center;
+  flex-wrap: wrap;
 }
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml