Merge pull request #142 from rebeccaalpert/alignment

fix(ChatbotWelcomePrompt): Sample prompts should be a row on fullscreen
patternfly · Sep 13, 2024 · a2846ca · a2846ca
2 parents 874cae2 + cf175f6
commit a2846ca
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss b/packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss
@@ -18,4 +18,20 @@
   .pf-chatbot__question {
     color: var(--pf-t--global--text--color--subtle);
   }
+
+  .pf-chatbot__prompt-suggestions > * {
+    flex: 1;
+  }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Fullscreen
+// ============================================================================
+.pf-chatbot--fullscreen {
+  .pf-chatbot--layout--welcome {
+    .pf-chatbot__prompt-suggestions {
+      flex-direction: row;
+      align-items: baseline;
+    }
+  }
 }
diff --git a/packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx b/packages/module/src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx
@@ -44,11 +44,7 @@ export const ChatbotWelcomePrompt: React.FunctionComponent<ChatbotWelcomePromptP
       <span className="pf-chatbot__question">{description}</span>
     </Content>
 
-    <Flex
-      className="pf-chatbot__prompt-suggestions"
-      direction={{ default: 'row', lg: 'column' }}
-      gap={{ default: 'gapLg' }}
-    >
+    <Flex className="pf-chatbot__prompt-suggestions" direction={{ default: 'column' }} gap={{ default: 'gapLg' }}>
       {prompts?.map((prompt) => (
         <Card key={prompt.message} className="pf-chatbot__prompt-suggestion" isClickable>
           <CardHeader