@redocly/theme 0.46.2 → 0.46.4

package/lib/markdoc/tags/markdoc-example.js

@@ -5,6 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdocExample = void 0;
 const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+// Walk through AST and look for raw markdown to parse
+function parseInlineMarkdown(ast, config) {
+    if (Array.isArray(ast)) {
+        return ast.flatMap((child) => parseInlineMarkdown(child, config));
+    }
+    if (typeof ast === 'string') {
+        const parsed = markdoc_1.default.parse(ast);
+        return markdoc_1.default.transform(parsed, config);
+    }
+    if (ast && typeof ast === 'object' && ast.$$mdtype === 'Tag') {
+        const children = parseInlineMarkdown(ast.children, config);
+        return Object.assign(Object.assign({}, ast), { children });
+    }
+    return ast;
+}
 // This custom tag prevents evaluating any children markdoc tags (no children) so we can
 // have markdoc examples in code fences
 // approach copied from: https://github.com/markdoc/docs/blob/main/markdoc/tags/markdoc-example.markdoc.js
@@ -30,8 +45,10 @@ exports.markdocExample = {
                 const fenceWithTitle = annotations.find((annotation) => annotation.name === 'title');
                 title = fenceWithTitle === null || fenceWithTitle === void 0 ? void 0 : fenceWithTitle.value;
             }
+            const demoContent = node.children[0].transformChildren(config);
+            const parsedDemoContent = parseInlineMarkdown(demoContent, config);
             return new markdoc_1.default.Tag('MarkdocExample', Object.assign(Object.assign({}, attributes), { title,
-                language, demoContent: node.children[0].transformChildren(config), rawContent: content }), []);
+                language, demoContent: parsedDemoContent, rawContent: content }), []);
         },
     },
     tagName: 'markdoc-example',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.46.2",
+  "version": "0.46.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -79,7 +79,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.19.1"
+    "@redocly/config": "0.19.2"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Feedback/Mood.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
-import { ReasonsSettingsSchema } from '@redocly/config';
 
+import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { FaceDissatisfiedIcon } from '@redocly/theme/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 import { FaceSatisfiedIcon } from '@redocly/theme/icons/FaceSatisfiedIcon/FaceSatisfiedIcon';
@@ -21,7 +21,12 @@ export enum MOOD_STATES {
 }
 
 export type MoodProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -36,19 +41,33 @@ export type MoodProps = {
       neutral?: ReasonsSettingsSchema;
       dissatisfied?: ReasonsSettingsSchema;
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [score, setScore] = React.useState('');
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const checkIfShouldDisplayReasons = (score: string) => {
     if (!score || !reasonsSettings) {
       return false;
@@ -112,26 +131,32 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
     onSubmit({
       score: remapScore(score),
       comment,
       reasons,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelMoodForm = () => {
     setScore('');
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitMoodForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -152,7 +177,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
 
   return (
     <MoodWrapper data-component-name="Feedback/Mood" className={className}>
-      <StyledForm>
+      <StyledForm onSubmit={onSubmitMoodForm}>
         <StyledFormMandatoryFields>
           <Label data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
@@ -213,12 +238,34 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelMoodForm} variant="text" size="small">
               Cancel
             </Button>
-            <Button onClick={onSubmitMoodForm} variant="secondary" size="small">
+            <Button type="submit" variant="secondary" size="small">
               Submit
             </Button>
           </ButtonsContainer>
@@ -291,3 +338,13 @@ const StyledMandatoryFieldContainer = styled.div`
   align-items: center;
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Rating.tsx

@@ -1,20 +1,27 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { useEffect } from 'react';
+import styled from 'styled-components';
 
+import type { AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Stars } from '@redocly/theme/components/Feedback/Stars';
 import { Button } from '@redocly/theme/components/Button/Button';
 
 export const FEEDBACK_MAX_RATING = 5;
 
 export type RatingProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max: number }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    max: number;
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -28,43 +35,63 @@ export type RatingProps = {
       component?: string;
       items: string[];
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const [comment, setComment] = React.useState('');
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const onSubmitRatingForm = () => {
     onSubmit({
       score,
       comment,
       reasons,
       max: FEEDBACK_MAX_RATING,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelRatingForm = () => {
     setScore(0);
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitRatingForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -95,7 +122,6 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
             <Stars max={FEEDBACK_MAX_RATING} onChange={setScore} value={score} />
           </StyledMandatoryFieldContainer>
         </StyledFormMandatoryFields>
-
         {(displayReasons || displayComment) && (
           <StyledFormOptionalFields>
             {displayReasons && (
@@ -125,6 +151,28 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelRatingForm} variant="text" size="small">
@@ -185,3 +233,13 @@ const ButtonsContainer = styled.div`
   margin-bottom: var(--spacing-xxs);
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Scale.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
+import type { AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { breakpoints } from '@redocly/theme/core/utils';
@@ -14,7 +15,13 @@ import { Button } from '@redocly/theme/components/Button/Button';
 export const MAX_SCALE = 10;
 
 export type ScaleProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max?: number }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    max?: number;
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -30,6 +37,7 @@ export type ScaleProps = {
       component?: string;
       items: string[];
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
@@ -42,14 +50,22 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     rightScaleLabel,
     comment: commentSettings,
     reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState(0);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const scaleOptions = [];
 
   for (let i = 1; i <= MAX_SCALE; i++) {
@@ -69,11 +85,14 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const handleCancel = () => {
     setScore(0);
     setComment('');
     setReasons([]);
+    setEmail(undefined);
   };
 
   const onSubmitScaleForm = () => {
@@ -82,16 +101,17 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
       comment,
       reasons,
       max: MAX_SCALE,
+      email,
     });
     setIsSubmitted(true);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitScaleForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -110,7 +130,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
   return (
     <ScaleWrapper data-component-name="Feedback/Scale" className={className}>
-      <StyledForm>
+      <StyledForm onSubmit={onSubmitScaleForm}>
         <StyledFormMandatoryFields>
           <Label data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
@@ -156,6 +176,28 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
             />
           )}
         </StyledFormOptionalFields>
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button
@@ -169,7 +211,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
             <Button
               data-translation-key="feedback.settings.scale.send"
-              onClick={onSubmitScaleForm}
+              type="submit"
               variant="secondary"
               size="small"
             >
@@ -259,3 +301,13 @@ const ScaleOptionsWrapper = styled.div`
     gap: 2px;
   }
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Sentiment.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
-import { ReasonsSettingsSchema } from '@redocly/config';
 
+import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
 import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
 
 export type SentimentProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -27,19 +32,33 @@ export type SentimentProps = {
       like?: ReasonsSettingsSchema;
       dislike?: ReasonsSettingsSchema;
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Sentiment({ settings, onSubmit, className }: SentimentProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const getScoreSpecificReasonSettings = (score: number) => {
     switch (score) {
       case 1:
@@ -68,6 +87,8 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const commentLabel =
     score === 1
@@ -100,20 +121,24 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
       score,
       comment,
       reasons,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelSentimentForm = () => {
     setScore(0);
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitSentimentForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -186,6 +211,28 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelSentimentForm} variant="text" size="small">
@@ -256,3 +303,13 @@ const ButtonsContainer = styled.div`
   margin-bottom: var(--spacing-xxs);
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Search/SearchDialog.tsx

@@ -280,6 +280,13 @@ const SearchOverlay = styled.div`
   height: 100vh;
   background: var(--bg-color-modal-overlay);
   z-index: var(--z-index-overlay);
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    align-items: start;
+    position: fixed;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
 `;
 
 const SearchDialogWrapper = styled.div`
@@ -293,9 +300,10 @@ const SearchDialogWrapper = styled.div`
   border-radius: 0;
 
   @media screen and (max-width: ${breakpoints.small}) {
-    /* Ignore resize on mobile */
+    min-height: -webkit-fill-available !important;
+    min-height: 100dvh !important;
+    height: auto !important;
     width: 100vw !important;
-    height: 100vh !important;
   }
 
   @media screen and (min-width: ${breakpoints.small}) {
@@ -323,6 +331,10 @@ const SearchDialogBody = styled.div`
   flex-direction: row;
   flex-grow: 1;
   overflow: hidden;
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    min-height: 0;
+  }
 `;
 
 const SearchDialogBodyMainView = styled.div`