fix: envelope editor mobile view

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Catalin Pit
2026-08-12 12:43:58 +03:00
co-authored by Cursor
parent 617f8cc204
commit 01b02db201
9 changed files with 402 additions and 262 deletions
@@ -21,6 +21,12 @@ export type DocumentAttachmentsPopoverProps = {
envelopeId: string;
buttonClassName?: string;
buttonSize?: 'sm' | 'default';
/**
* Visually hide the button label below the `sm` breakpoint while keeping it
* available to screen readers.
*/
collapseLabelOnMobile?: boolean;
};
const ZAttachmentFormSchema = z.object({
@@ -35,6 +41,7 @@ export const DocumentAttachmentsPopover = ({
envelopeId,
buttonClassName,
buttonSize,
collapseLabelOnMobile = false,
}: DocumentAttachmentsPopoverProps) => {
const { toast } = useToast();
const { _ } = useLingui();
@@ -129,7 +136,7 @@ export const DocumentAttachmentsPopover = ({
<Button variant="outline" className={cn('gap-2', buttonClassName)} size={buttonSize}>
<Paperclip className="h-4 w-4" />
<span>
<span className={cn(collapseLabelOnMobile && 'sr-only sm:not-sr-only')}>
<Trans>Attachments</Trans>
{attachments && attachments.data.length > 0 && <span className="ml-1">({attachments.data.length})</span>}
</span>
@@ -19,6 +19,12 @@ import { z } from 'zod';
export type EmbeddedEditorAttachmentPopoverProps = {
buttonClassName?: string;
buttonSize?: 'sm' | 'default';
/**
* Visually hide the button label below the `sm` breakpoint while keeping it
* available to screen readers.
*/
collapseLabelOnMobile?: boolean;
};
const ZAttachmentFormSchema = z.object({
@@ -32,6 +38,7 @@ type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
export const EmbeddedEditorAttachmentPopover = ({
buttonClassName,
buttonSize,
collapseLabelOnMobile = false,
}: EmbeddedEditorAttachmentPopoverProps) => {
const { toast } = useToast();
const { _ } = useLingui();
@@ -90,7 +97,7 @@ export const EmbeddedEditorAttachmentPopover = ({
<Button variant="outline" className={cn('gap-2', buttonClassName)} size={buttonSize}>
<Paperclip className="h-4 w-4" />
<span>
<span className={cn(collapseLabelOnMobile && 'sr-only sm:not-sr-only')}>
<Trans>Attachments</Trans>
{attachments.length > 0 && <span className="ml-1">({attachments.length})</span>}
</span>