Skip to content

Input font size is large on modals on desktop #13553

@vincaslt

Description

@vincaslt

Summary

An input inside of app-bridge modal will have a large font size because of CSS breakpoints interpreting modal as a screen and making the font large like on mobile.

Expected behavior

Text in inputs is small on desktop.

Image

Actual behavior

Image

Steps to reproduce

Here's a piece of relevant code:

 <Modal id="discount-selector-modal" open={open} onHide={onClose}>
      <TitleBar title={t("survey.config.settings.select_discount")} />
      <ModalContent>
        <TextField
          label={t("survey.config.settings.search_discounts")}
          value={searchTerm}
          onChange={setSearchTerm}
          autoComplete="off"
          placeholder={t("survey.config.settings.search_discounts_placeholder")}
          labelHidden
        />
      </ModalContent>
      <ModalContent padding="0">
        <ResourceList items={filteredDiscounts} renderItem={renderItem} />
      </ModalContent>
    </Modal>

Are you using React components?

Yes

Polaris version number

13.9.5

Browser

Chrome

Device

Linux 6.13 Fedora Linux 41 (Workstation Edition)

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugSomething is broken and not working as intended in the system.untriaged

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions