Modal horizontal size limited

Custom CSS & Theme Design
1

Steps to reproduce

Open obsidian, Strg+P for command palette, open some modal → It’s restricted in horizontal width. Major UI/UX issue, causes horizontal scroll…

Expected result

Have a full-width modal open

Actual result

Modal is in 1:3 aspect ratio or something :thinking: (see image below)

Environment

  • Operating system: Windows 11 x64
  • Debug info: SYSTEM INFO:
    Obsidian version: v1.0.3
    Installer version: v1.0.3
    Operating system: Windows 10 Pro 10.0.22621
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: dark
    Community theme: none
    Snippets enabled: 0
    Restricted mode: off
    Plugins installed: 3
    Plugins enabled: 3
    1: Hot Reload v0.1.10
    2: Obsidian Functionplot v1.2.1
    3: Obsidian Charts v3.7.1

RECOMMENDATIONS:
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Additional information

image
image1920×1040 41.1 KB

2

This is not vanilla obsidian. We don’t take bug reports about it.

3

how is this not vanilla? because I have a plugin installed? Tell me how to create a modal w/o the plugins and ill show you. But maybe this is a flaw with the plugin modal implementation so it would matter

4

If anything this is developer problem not a bug. So please post in “developers and api” or ask on discord.

5

this is not because of my own plugin. it happens with every plugin I install.

6

Great, still API problems go into developers and api. Thanks!

7

Can you attach a minimal reproducing example of the code you use?

8

Here’s a minimal repro: GitHub - leonhma/obsidian-functionplot at squished-modal-repro. Just be sure to checkout the squished-modal-repro branch. The command “Plot a function” opens a modal with an oversized p element so that the window goes as big as it gets. The vertical size is fine but horizontal is limited again. Also, the exit cross in the top right moves when you use scrolling so I guess it doesn’t have the right CSS either.

image
image1920×1080 84.6 KB

9

you need to style the modal container

10

I styled the modal (as you can see in the repo). The same happens with obsidian charts (another plugin). This is one line of CSS that has to be deleted by the obsidian devs, namely width: var(--dialog-width); in line 4756 in app.css, so that the width is no longer fixed. I assume this file is produced by some kind of build tool so they’ll have to look for the original source, but it is this line that breaks the look. This is currently in prod so I do sense some urgency here…