adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-04 09:32:21 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

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

New Issue
Closed
opened 2026-10-05 02:49:45 +02:00 by adam · 4 comments
adam commented 2026-10-05 02:49:45 +02:00
Owner
Copy link
Copy source

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

**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" } ] } ] }, ``` 2. Click on the insert media button on a markdown file 3. Attempt to fill out the pop up window 4. 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** <img width="1177" alt="Screenshot 2023-08-10 at 16 24 50" src="https://github.com/estruyf/vscode-front-matter/assets/411945/9f4a4c7d-20b6-4623-a132-d01ac6de1cfe"> **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 <!-- github-sync-id:1845313534 -->
adam closed this issue 2026-10-05 02:49:45 +02:00
adam commented 2026-10-05 02:49:46 +02:00
Author
Owner
Copy link
Copy source

Thank you @scottsweb for the bug!

Thank you @scottsweb for the bug! <!-- github-comment-id:1674608762 -->
adam commented 2026-10-05 02:49:47 +02:00
Author
Owner
Copy link
Copy source

Changing this to the slideover.

image

Changing this to the slideover. ![image](https://github.com/estruyf/vscode-front-matter/assets/2900833/388df946-40b3-4be3-a2d4-4c0c95cca56b) <!-- github-comment-id:1683595559 -->
adam commented 2026-10-05 02:49:47 +02:00
Author
Owner
Copy link
Copy source

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

This will be available in the beta version to test out. <!-- github-comment-id:1683601121 -->
adam commented 2026-10-05 02:49:48 +02:00
Author
Owner
Copy link
Copy source

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

Thanks, I think that is a good solution. It will make it much more flexible. <!-- github-comment-id:1683635368 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#487