Merge pull request #292 from rebeccaalpert/footer

fix(ChatbotFooter): Make divider full width
patternfly · Nov 11, 2024 · e5ce63f · e5ce63f
2 parents 67f66cc + b0628e6
commit e5ce63f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/packages/module/src/ChatbotFooter/ChatbotFooter.scss b/packages/module/src/ChatbotFooter/ChatbotFooter.scss
@@ -6,10 +6,13 @@
 // ============================================================================
 .pf-chatbot__footer {
   --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
-  padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
   background-color: var(--pf-t--chatbot--background);
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--pf-chatbot__footer--RowGap);
 }
 .pf-chatbot__footer-container {
+  padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg);
   display: flex;
   flex-direction: column;
   justify-content: stretch;
@@ -23,17 +26,14 @@
   .pf-chatbot--embedded,
   .pf-chatbot--fullscreen {
     .pf-chatbot__footer {
-      padding: var(--pf-t--global--spacer--sm) 0;
-      display: flex;
-      justify-content: center;
-
+      align-items: center;
       .pf-v6-c-divider {
         display: none;
       }
     }
-
     .pf-chatbot__footer-container {
       width: 60rem;
+      padding: var(--pf-t--global--spacer--sm) 0;
     }
   }
 }
@@ -43,10 +43,11 @@
 // ============================================================================
 .pf-chatbot--docked {
   .pf-chatbot__footer {
-    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
-
     .pf-v6-c-divider {
       display: none;
     }
   }
+  .pf-chatbot__footer-container {
+    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
+  }
 }
diff --git a/packages/module/src/ChatbotFooter/ChatbotFooter.tsx b/packages/module/src/ChatbotFooter/ChatbotFooter.tsx
@@ -25,10 +25,8 @@ export const ChatbotFooter: React.FunctionComponent<ChatbotFooterProps> = ({
   ...props
 }: ChatbotFooterProps) => (
   <div className={`pf-chatbot__footer ${className ?? ''}`} {...props}>
-    <div className="pf-chatbot__footer-container">
-      <Divider />
-      {children}
-    </div>
+    <Divider />
+    <div className="pf-chatbot__footer-container">{children}</div>
   </div>
 );