From 64c4371dd991115c44e95102cf8d1cbe97d85318 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 3 Dec 2024 14:23:09 +0100
Subject: [PATCH] fix(outline): fix mobile detection and box shadow

Also enable outline on mobile in read-write mode.

Fixes: #6410
Fixes: #6693

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Editor/EditorOutline.vue | 33 ++++++++-----------------
 src/components/Editor/Wrapper.vue       |  2 +-
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
index 24a7f30a103..814689c3831 100644
--- a/src/components/Editor/EditorOutline.vue
+++ b/src/components/Editor/EditorOutline.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div data-text-el="editor-outline" class="editor--outline" :class="{ 'editor--outline-mobile': mobile }">
+	<div data-text-el="editor-outline" class="editor--outline" :class="{ 'editor--outline-mobile': $isMobile }">
 		<header class="editor--outline__header">
 			<NcButton class="editor--outline__btn-close"
 				type="tertiary"
@@ -26,6 +26,7 @@ import TableOfContents from './TableOfContents.vue'
 import { useOutlineStateMixin, useOutlineActions } from './Wrapper.provider.js'
 import { Close } from './../icons.js'
 import useStore from '../../mixins/store.js'
+import { useIsMobileMixin } from '../Editor.provider.js'
 
 export default {
 	name: 'EditorOutline',
@@ -34,27 +35,12 @@ export default {
 		NcButton,
 		TableOfContents,
 	},
-	mixins: [useStore, useOutlineStateMixin, useOutlineActions],
-	data: () => ({
-		mobile: false,
-	}),
-	mounted() {
-		this.$resizeObserver = new ResizeObserver(this.onResize)
-		this.$resizeObserver.observe(this.$el.parentElement)
-		this.onResize([this.$el.parentElement])
-	},
-	beforeDestroy() {
-		this.$resizeObserver.unobserve(this.$el.parentElement)
-		this.$resizeObserver = null
-		this.$onResize = null
-	},
-	methods: {
-		onResize([el]) {
-			window.requestAnimationFrame(() => {
-				this.mobile = el.clientWidth < 320
-			})
-		},
-	},
+	mixins: [
+		useIsMobileMixin,
+		useStore,
+		useOutlineStateMixin,
+		useOutlineActions,
+	],
 }
 </script>
 
@@ -68,7 +54,8 @@ export default {
 	max-height: calc(100% - 204px);
 
 	&-mobile {
-		box-shadow: 8px 0 17px -19px var(--color-box-shadow);
+		border-radius: var(--border-radius-large);
+		box-shadow: 0 1px 10px var(--color-box-shadow);
 		background-color: var(--color-main-background-translucent);
 		z-index: 1;
 	}
diff --git a/src/components/Editor/Wrapper.vue b/src/components/Editor/Wrapper.vue
index f3daab7984b..d81e8900429 100644
--- a/src/components/Editor/Wrapper.vue
+++ b/src/components/Editor/Wrapper.vue
@@ -80,7 +80,7 @@ export default {
 				return false
 			}
 
-			return this.viewWidth > 1265
+			return true
 		},
 	},