Skip to content

Issue: Insert media dialog is cropped on smaller screens #617

Closed

Description

@scottsweb

Describe the bug
When inserting a media snippet / image with a number of custom fields, the UI becomes cropped on smaller screens.

To Reproduce

  1. Add a few extra fields to your media snippet:
    "Image": {
      "description": "Insert a responsive image",
      "body": "{% image \"[[&mediaUrl]]\", \"[[alt]]\", \"[[mq]]\", \"[[loading]]\", \"[[fetch]]\" \"[[decoding]]\", \"[[mediaWidth]]\", \"[[mediaHeight]]\" %}",
      "isMediaSnippet": true,
      "fields": [
        {
          "name": "mq",
          "title": "Media Query",
          "type": "string",
          "single": true,
          "default": "(min-width: 800px) 580px, 100vw"
        },
        {
          "name": "loading",
          "title": "Loading",
          "type": "choice",
          "default": "lazy",
          "choices": [
            {
              "id": "lazy",
              "title": "Lazy"
            },
            {
              "id": "eager",
              "title": "Eager"
            }
          ]
        },
        {
          "name": "fetch",
          "title": "Fetch Priority",
          "type": "choice",
          "default": "auto",
          "choices": [
            {
              "id": "auto",
              "title": "Auto"
            },
            {
              "id": "high",
              "title": "High"
            },
            {
              "id": "low",
              "title": "Low"
            }
          ]
        },
        {
          "name": "decoding",
          "title": "Decoding",
          "type": "choice",
          "default": "async",
          "choices": [
            {
              "id": "auto",
              "title": "Auto"
            },
            {
              "id": "sync",
              "title": "Sync"
            },
            {
              "id": "async",
              "title": "Async"
            }
          ]
        }
      ]
    },
  1. Click on the insert media button on a markdown file
  2. Attempt to fill out the pop up window
  3. Notice you are unable to complete all fields on smaller screens

Expected behavior
I should be able to input all form fields. Perhaps a max height is needed on the dialog.

Screenshots

Screenshot 2023-08-10 at 16 24 50

Desktop (please complete the following information):

  • OS: [e.g. iOS] MacOS 13.5
  • Browser [e.g. chrome, safari] Firefox
  • Version [e.g. 22] 116

Smartphone (please complete the following information):

N/A

Activity

  1. estruyf commented on Aug 11, 2023

    @estruyf
    Owner

    Thank you @scottsweb for the bug!

  2. estruyf commented on Aug 18, 2023

    @estruyf
    Owner

    Changing this to the slideover.

    image

  3. estruyf commented on Aug 18, 2023

    @estruyf
    Owner

    This will be available in the beta version to test out.

  4. scottsweb commented on Aug 18, 2023

    @scottsweb
    Author

    Thanks, I think that is a good solution. It will make it much more flexible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions