Is there an option or method to change the default minimum width (200px) of Left Sidebar? I was able to reduce the width via custom CSS, but the width will then be fixed and unadjustable with mouse drag. Any support appreciated.
would you share the CSS you used? I was able to fix mine without disabling drag-resizing with min-width: 200px;
EDIT: ahh no, I’m sorry, I realized I misread your post and trying to change the min-width to something smaller than 200px did not, in fact, work. since pulling any further left collapses the sidebar altogether, I’m thinking that’s a limitation of the app functioning itself rather than CSS, unfortunately. (at least, there’s nothing else I can think of off the top of my head. my bad!)
I see. I also suspected it may be a restriction set by app. It is just that almost all of files have Folgezettel-like short ID names, like ‘342r1.md’, and current minimum width creates a lot of dead space when I leave the Left-Side bar open. Thanks for the reply.
This plugin provides various commands to change the sidebar widths: increment, decrement, toggle open/close at a specified “standard” width etc.
While this plugin is useful, when it is used to resize the sidebar to less than 200px, and interaction using the mouse on the divider to adjust width forces it back to either 200px or 0px.
in app.js, this is responsible for resizing
t.prototype.setSize = function(e) {
this.size = e,
this.containerEl.style.width = "".concat(e, "px")
}
setSize is found in onSidedockResizeStart, responsible for adjusting sidebar width with mouse:
t.prototype.onSidedockResizeStart = function(e) {
var t = this;
if (0 === e.button) {
var n = e.win;
this.app.disableCssTransition();
var i = function(e) {
var n = e.clientX
, i = dF
, r = t.containerEl.getBoundingClientRect();
if ("left" === t.side ? (i = n - r.x,
i += t.resizeHandleEl.offsetWidth / 2) : "right" === t.side && (i = t.workspace.containerEl.clientWidth - n,
i += t.resizeHandleEl.offsetWidth / 2),
!t.collapsed && i < 50)
t.collapse();
else if (t.collapsed && i >= dF)
t.expand();
else if (!t.collapsed) {
var o = t.workspace.containerEl.clientWidth
, a = Math.clamp(i, dF, Math.max(dF, .8 * o));
t.setSize(a)
}
e.preventDefault()
}
, r = function(e) {
0 === e.button && (n.removeEventListener("mousemove", i),
n.removeEventListener("mouseup", r),
document.body.removeClass("is-grabbing"),
t.app.enableCssTransition(),
t.workspace.requestSaveLayout(),
t.workspace.requestResize())
};
n.addEventListener("mousemove", i),
n.addEventListener("mouseup", r),
document.body.addClass("is-grabbing")
}
}
specifically this section in the middle:
else if (!t.collapsed) {
var o = t.workspace.containerEl.clientWidth
, a = Math.clamp(i, dF, Math.max(dF, .8 * o));
t.setSize(a)
}
Leads me to believe:
i is the width chosen by the user using the mouse,dF is the min-width.8*o is 80% of the clientWidthalso this part sets position (50px from edge) that the window collapses to 0px at:
if ("left" === t.side ? (i = n - r.x,
i += t.resizeHandleEl.offsetWidth / 2) : "right" === t.side && (i = t.workspace.containerEl.clientWidth - n,
i += t.resizeHandleEl.offsetWidth / 2),
!t.collapsed && i < 50)
t.collapse();
Is it possible a plugin can be written that places new variables in place of the dF and the 50 above?
I’ve not tried the min-width CSS setting here, but if this works, then I imagine it would be straightforward to support this from the plugin. However, if Obsidian does not expose a formal API to change that “50” — it looks like a hardcoded magic number from the snipper — I’m not sure how to go about changing that without getting into messing around with internals.
Posting here for anyone not following the issue on your github:
I have tried using min-width in css snippets, but when min-width is less than 200px it is ineffective.
for instance, this had no effect:
.workspace-split.mod-left-split, .workspace-split.mod-right-split {
min-width: 100px !important;
}
I understand the 50px limitation. (honestly I doubt anyone will be shrinking it to that, as even 100px is quite tiny)
(This was originally a bug report I made regarding this issue, but it was merged with this thread because apparently it is expected behavior that the sidebars not have a user-definable min-width… must we make our own sidebar elements?? Frustrating)
In a new vault with no snippets, attempt to adjust the left sidebar to a value less than 150px. User will not be able to.
Disable the ribbon, and the sidebar will be 200px. User will not be able to adjust smaller than 200px. When the mouse Is moved to 50px from edge of screen, the sidebar collapses to zero.
app.js is clearly designed to make this behavior happen, as seen here:
Yes
The user should expect to be able to modify this behavior using a css snippet that changes min-width of the sidebar.
CSS min-width is not respected. This has little effect:
.workspace-split.mod-left-split, .workspace-split.mod-right-split {
min-width: 100px !important;
}
It simply adds a bump in the animation of collapsing the sidebar.
SYSTEM INFO:
Obsidian version: v1.6.6
Installer version: v1.4.16
Operating system: Darwin Kernel Version 23.5.0: Wed May 1 20:16:51 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8103 23.5.0
Login status: logged in
Catalyst license: supporter
Insider build toggle: on
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 1
Restricted mode: off
Plugins installed: 16
Plugins enabled: 0
A gif of the sidebar failing to resize even with snippet. It is slowed down so you can see the resize stop momentarily at 100px when the mouse is 50px from the edge. Even if the user unclicks, the size reverts to 0px after a moment.
While there is already discussion of this in the Custom CSS & Theme Design section of the forum, and there is even a plugin that provides keyboard-only work around, this deserves a bug report because app.js should not determine min-width of an element, .css should