Why did you choosed to disable user selection and context menu?

[zanhk]

Is there a specific reason why context menu and user selection has been disabled?

https://github.com/sveltia/sveltia-ui/blob/2a9e7c8d309640dfc2af796e177427c3a0906717/src/lib/components/util/app-shell.svelte#L78

woudl be nice to have at least an option to allow it.

[zanhk]

if (
      !document.documentElement.matches('[data-env="dev"]') &&
      !document.documentElement.matches('[data-allow-contextmenu]') &&
      !(/** @type {HTMLElement} */ (event.target)?.matches('input[type="text"], textarea'))
    ) {
      event.preventDefault();
}

[kyoshino]

Because

• custom context menus (not yet implemented) will conflict with native ones
• I’d like to make the app more like native apps
• some web apps, like Google Drive. Miro, etc., actually disable it

There is an option to enable it:

• Click on the Account menu button at the top right corner of the CMS
• Go to Settings > Advanced > Enable Developer Mode 🙂

[zanhk]

Thanks, didn't see it, for user selection I just realized why it was disabled, but for anyone wondering I overrided the rules in index.html with

<style>
	/* Fix cursor */
	.app-shell p,
	.app-shell h1,
	.app-shell h2,
	.app-shell h3,
	.app-shell h4,
	.app-shell h5,
	.app-shell h5 {
		cursor: auto !important;
		user-select: text !important;
	}
	/* Improve scrollbar layout */
	::-webkit-scrollbar-track {
		border: none;
		background-color: transparent;
	}
	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		background-color: transparent;
	}
	::-webkit-scrollbar-thumb {
		background-color: #2c3337;
		border-radius: 2px;
	}
	::-webkit-scrollbar-thumb:hover {
		background-color: #576b77;
	}
	/* Scrollbar layout Dark theme */
	[data-theme="dark"] ::-webkit-scrollbar-thumb {
		background-color: #b6b6b6;
	}
	[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
		background-color: white;
	}
	/* Improve sidebar width */
	.secondary-sidebar {
		min-width: 340px;
	}
</style>

[kyoshino]

Related: I have a plan to replace the browser’s native scrollbars with custom scrollbars because native scrollbars look bad, especially on Windows.

[zanhk]

in chrome and safari you can use ::-webkit-scrollbar

[kyoshino]

I know, but the customizations with CSS are limited.

[kyoshino]

FYI: There is even an accessibility standard to create custom, accessible scrollbars.

Further related: I’ll implement custom tooltips. It’s really common; many web apps do it.