Properties panel name column is fixed width and truncates property name

Steps to reproduce

In the property panel on both the macOS and iOS apps, the property name gets truncated at the 11th character and an elipsis is added. I’m desktop there is plenty of room and on my iPhone promax there’s definitely additional room as well.

The cause of this is that the name column is fixed length in both, so the value expense to fill the panel width. This effectively makes the panel editor in iOS unusable to me and frustrating to use in the desktop.

11

Did you follow the troubleshooting guide? [Y/N]

Y

Y

Expected result

I didn’t expect any change because this is apparently a configuration option in the app. Ideally, the name column would auto expand or allow the user to manually widen it. If there is a custom CSS option, that would definitely work as well.

Actual result

I didn’t expect any change, so the actual result is what I saw prior to trying the troubleshooting steps

Environment

macOS:

Obsidian version: v1.5.8
Installer version: v1.4.16
Operating system: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000 23.3.0
Login status: logged in
Catalyst license: supporter
Insider build toggle: on
Live preview: on
Base theme: adapt to system
Community theme: Minimal v7.4.7
Snippets enabled: 2
Restricted mode: off

iOS:
Operating system: ios 17.3.1 (Apple iPhone16,2)
Obsidian version: 1.5.8 (126)
API version: v1.5.8
Login status: logged in
Catalyst license: supporter
Live preview: on
Base theme: adapt to system
Community theme: Minimal v7.4.7
Snippets enabled: 2

Additional information

This is intentional. you can hover over the property name.
If you want more, search/open a feature request for this

You can use a CSS snippet to adjust the width of the property name/key. e.g., for all devices:

/* adjust properties label width - default is 9em */ 
body { 
    --metadata-label-width: 20em; 
}

For desktop and all mobile devices separately:

body { 
    --metadata-label-width: 20em; 
}

.is-mobile { 
    --metadata-label-width: 15em; 
}

.is-phone (phone sized devices) and .is-tablet (tablet sized devices) selectors are also available to use.

1 Like

Amazing! That worked. Thank you so much.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.