From faedc08f9193c7347403e0e3acc83373b3093619 Mon Sep 17 00:00:00 2001
From: jhawkins <jhawkins@snolab.ca>
Date: Fri, 6 Dec 2024 13:45:47 -0500
Subject: [PATCH 1/2] Bumped version to 0.2.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 17c66d3..5733bd7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sharepoint-blurb-web-part",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "engines": {
     "node": ">=18.17.1 <19.0.0"

From 24596efde2948f08526ac3bcc4c88d26a75d4d29 Mon Sep 17 00:00:00 2001
From: reactivewebstudio <reactivewebstudio@gmail.com>
Date: Wed, 18 Dec 2024 11:16:17 -0500
Subject: [PATCH 2/2] Improved responsiveness

---
 package.json                                  |  2 +-
 src/webparts/blurb/BlurbWebPart.manifest.json |  1 +
 src/webparts/blurb/BlurbWebPart.ts            |  2 ++
 .../blurb/components/Blurb.module.scss        | 21 ++++++++++++++-----
 src/webparts/blurb/components/Blurb.tsx       |  4 ++--
 src/webparts/blurb/components/IBlurbProps.ts  |  1 +
 6 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 5733bd7..ca83789 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sharepoint-blurb-web-part",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": true,
   "engines": {
     "node": ">=18.17.1 <19.0.0"
diff --git a/src/webparts/blurb/BlurbWebPart.manifest.json b/src/webparts/blurb/BlurbWebPart.manifest.json
index 49b7d93..e37c1de 100644
--- a/src/webparts/blurb/BlurbWebPart.manifest.json
+++ b/src/webparts/blurb/BlurbWebPart.manifest.json
@@ -9,6 +9,7 @@
 
   "requiresCustomScript": false,
   "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsFullBleed": true,
   "supportsThemeVariants": true,
 
   "preconfiguredEntries": [{
diff --git a/src/webparts/blurb/BlurbWebPart.ts b/src/webparts/blurb/BlurbWebPart.ts
index b55240f..19662ab 100644
--- a/src/webparts/blurb/BlurbWebPart.ts
+++ b/src/webparts/blurb/BlurbWebPart.ts
@@ -43,6 +43,8 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
         containers: this.properties.containers || [],
         containerCount: this.properties.containerCount || 1,
         isEditMode: this.displayMode === DisplayMode.Edit,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        isFullWidth: (this.context.manifest as any).supportedHosts?.includes('SharePointFullPage'),
         displayMode: this.displayMode, // Pass display mode
         onContainerClick: async (index: number) => {
           if (this.displayMode === DisplayMode.Edit) {
diff --git a/src/webparts/blurb/components/Blurb.module.scss b/src/webparts/blurb/components/Blurb.module.scss
index 5d1ebc9..3285172 100644
--- a/src/webparts/blurb/components/Blurb.module.scss
+++ b/src/webparts/blurb/components/Blurb.module.scss
@@ -10,13 +10,18 @@
 .containerGrid {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px; // Spacing between containers
+  // gap: 12px; // Spacing between containers
   justify-content: center;
+  justify-items: space-between;
+  
+  .item {
+    flex: 1 1 min-content;
+  }
 
   .container {
-    flex: 1 1 calc(25% - 16px); // Default: 4 containers per row
+    flex: 1 1; // Default: 4 containers per row
     max-width: 200px; // Optional: Set a max width
-    min-width: 150px; // Ensures smaller containers on resize
+    min-width: 90px; // Ensures smaller containers on resize
     position: relative;
     margin: 10px;
     padding: 20px;
@@ -74,16 +79,22 @@
   display: block; /* Ensure the entire block is clickable */
 }
 
+.fullWidth {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+}
+
 // Responsiveness
 @media (max-width: 1200px) {
   .container {
-    flex: 1 1 calc(33.33% - 16px); // Adjusts to 3 containers per row
+    flex: 1 1 calc(33.33% - 12px); // Adjusts to 3 containers per row
   }
 }
 
 @media (max-width: 768px) {
   .container {
-    flex: 1 1 calc(50% - 16px); // Adjusts to 2 containers per row
+    flex: 1 1 calc(50% - 12px); // Adjusts to 2 containers per row
   }
 }
 
diff --git a/src/webparts/blurb/components/Blurb.tsx b/src/webparts/blurb/components/Blurb.tsx
index a7dbb4f..c5d5482 100644
--- a/src/webparts/blurb/components/Blurb.tsx
+++ b/src/webparts/blurb/components/Blurb.tsx
@@ -32,7 +32,7 @@ export const Blurb: React.FunctionComponent<IBlurbProps> = (props) => {
   };
 
   return (
-    <div className={styles.blurbContainer}>
+    <div className={props.isFullWidth ? `${styles.blurbContainer} ${styles.fullWidth}` : styles.blurbContainer}>
       <div className={styles.containerGrid}>
         {props.containers.map((container, index) => {
           const isSelected = selectedBlurbIndex === index;
@@ -122,7 +122,7 @@ export const Blurb: React.FunctionComponent<IBlurbProps> = (props) => {
                 />
               )}
               <h3 style={{ color: container.fontColor }}>{container.title || 'Blurb Title'}</h3>
-              <p style={{ color: container.fontColor }}>{container.text || 'Add text'}</p>
+              <p style={{ color: container.fontColor }}>{container.text || ''}</p>
             </WrapperElement>
           );
         })}
diff --git a/src/webparts/blurb/components/IBlurbProps.ts b/src/webparts/blurb/components/IBlurbProps.ts
index 81f7366..f723aa3 100644
--- a/src/webparts/blurb/components/IBlurbProps.ts
+++ b/src/webparts/blurb/components/IBlurbProps.ts
@@ -20,6 +20,7 @@ export interface IBlurbProps {
   containerCount: number;
   isEditMode: boolean;
   displayMode: DisplayMode;
+  isFullWidth?: boolean;
   onContainerClick: (index: number) => void;
   onEditClick: (index: number) => void;
   onMoveClick: (index: number, direction: 'up' | 'down') => void; // Updated to include direction