setting wide for panel settings

Author: Allexik

src/components/overlay.vue

@@ -5,7 +5,7 @@
 		@click.self="$emit('close')"
 	>
 		<div
-			class="w-full md:w-4/5 bg-white text-gray-800 color-modal max-h-full overflow-y-auto"
+			class="w-full md:w-2/5 bg-white text-gray-800 color-modal max-h-full overflow-y-auto"
 			:class="modalClass"
 		>
 			<div class="p-4">

src/components/panel.vue

@@ -11,7 +11,7 @@
 			class="pb-2 flex"
 		>
 			<div class="flex-1 min-w-0 overflow-hidden whitespace-no-wrap text-overflow-ellipsis">
-				{{ name }}
+				<span :title="name">{{ name }}</span>
 			</div>
 			<button
 				v-if="hasSettings"
@@ -43,6 +43,7 @@
 		</div>
 		<overlay
 			v-if="settingsOpen"
+			:wide="wideSettings"
 			@close="settingsOpen = false"
 		>
 			<template #title>
@@ -70,6 +71,10 @@ export default {
 		isGrid: {
 			type: Boolean,
 			default: () => false
+		},
+		wideSettings: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {

src/components/panels/scenes.vue

@@ -1,5 +1,8 @@
 <template>
-	<panel-wrapper :content-class="['button-grid', 'has-per-row-' + perRow, 'overflow-y-auto', 'flex-wrap', 'text-3xl']">
+	<panel-wrapper
+		wide-settings
+		:content-class="['button-grid', 'has-per-row-' + perRow, 'overflow-y-auto', 'flex-wrap', 'text-3xl']">
+
 		<template #name>
 			Scenes
 		</template>