[fix] Citation styles in mobile (#659)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <[email protected]>
microsoft · Mar 26, 2024 · 1942217 · 1942217
1 parent 65fcfb6
commit 1942217
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 28 deletions.
diff --git a/frontend/src/components/Answer/Answer.module.css b/frontend/src/components/Answer/Answer.module.css
@@ -59,6 +59,14 @@
     flex-grow: 0;
 }
 
+.citationWrapper {
+    margin-top: 8;
+    display: flex;
+    flex-flow: wrap column;
+    max-height: 150px;
+    gap: 4px;
+}
+
 .citationContainer {
     margin-left: 10px;
     font-style: normal;
@@ -172,4 +180,22 @@
 sup {
     font-size: 10px;
     line-height: 10px;
+}
+
+@media (max-width: 480px) {
+    .answerFooter {
+        flex-direction: column-reverse;
+    }
+
+    .citationWrapper {
+        max-height: max-content;
+    }
+
+    .citationContainer {
+        margin-left: 0;
+    }
+
+    .answerDisclaimer {
+        margin-bottom: 5px;
+    }
 }
diff --git a/frontend/src/components/Answer/Answer.tsx b/frontend/src/components/Answer/Answer.tsx
@@ -48,7 +48,7 @@ export const Answer = ({
     const handleChevronClick = () => {
         setChevronIsExpanded(!chevronIsExpanded);
         toggleIsRefAccordionOpen();
-      };
+    };
 
     useEffect(() => {
         setChevronIsExpanded(isRefAccordionOpen);
@@ -216,35 +216,35 @@ export const Answer = ({
 
                 </Stack.Item>
                 <Stack horizontal className={styles.answerFooter}>
-                {!!parsedAnswer.citations.length && (
-                    <Stack.Item
-                        onKeyDown={e => e.key === "Enter" || e.key === " " ? toggleIsRefAccordionOpen() : null}
-                    >
-                        <Stack style={{width: "100%"}} >
-                            <Stack horizontal horizontalAlign='start' verticalAlign='center'>
-                                <Text
-                                    className={styles.accordionTitle}
-                                    onClick={toggleIsRefAccordionOpen}
-                                    aria-label="Open references"
-                                    tabIndex={0}
-                                    role="button"
-                                >
-                                <span>{parsedAnswer.citations.length > 1 ? parsedAnswer.citations.length + " references" : "1 reference"}</span>
-                                </Text>
-                                <FontIcon className={styles.accordionIcon}
-                                onClick={handleChevronClick} iconName={chevronIsExpanded ? 'ChevronDown' : 'ChevronRight'}
-                                />
+                    {!!parsedAnswer.citations.length && (
+                        <Stack.Item
+                            onKeyDown={e => e.key === "Enter" || e.key === " " ? toggleIsRefAccordionOpen() : null}
+                        >
+                            <Stack style={{ width: "100%" }} >
+                                <Stack horizontal horizontalAlign='start' verticalAlign='center'>
+                                    <Text
+                                        className={styles.accordionTitle}
+                                        onClick={toggleIsRefAccordionOpen}
+                                        aria-label="Open references"
+                                        tabIndex={0}
+                                        role="button"
+                                    >
+                                        <span>{parsedAnswer.citations.length > 1 ? parsedAnswer.citations.length + " references" : "1 reference"}</span>
+                                    </Text>
+                                    <FontIcon className={styles.accordionIcon}
+                                        onClick={handleChevronClick} iconName={chevronIsExpanded ? 'ChevronDown' : 'ChevronRight'}
+                                    />
+                                </Stack>
+
                             </Stack>
-
-                        </Stack>
+                        </Stack.Item>
+                    )}
+                    <Stack.Item className={styles.answerDisclaimerContainer}>
+                        <span className={styles.answerDisclaimer}>AI-generated content may be incorrect</span>
                     </Stack.Item>
-                )}
-                <Stack.Item className={styles.answerDisclaimerContainer}>
-                    <span className={styles.answerDisclaimer}>AI-generated content may be incorrect</span>
-                </Stack.Item>
                 </Stack>
-                {chevronIsExpanded && 
-                    <div style={{ marginTop: 8, display: "flex", flexFlow: "wrap column", maxHeight: "150px", gap: "4px" }}>
+                {chevronIsExpanded &&
+                    <div className={styles.citationWrapper} >
                         {parsedAnswer.citations.map((citation, idx) => {
                             return (
                                 <span 

diff --git a/frontend/src/pages/chat/Chat.module.css b/frontend/src/pages/chat/Chat.module.css
@@ -345,4 +345,8 @@ a {
     .chatEmptyStateTitle {
         line-height: 36px;
     }
+
+    .citationPanel {
+        max-width: 100%;
+    }
 }
diff --git a/static/assets/index-161ed743.js b/static/assets/index-161ed743.js
diff --git a/static/assets/index-161ed743.js.map b/static/assets/index-161ed743.js.map
diff --git a/static/assets/index-81370a29.css b/static/assets/index-81370a29.css