From d82727f831c82acb6815db5abdbca97968db59eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 28 May 2025 16:32:25 +0200
Subject: [PATCH] Update CommentEditor styles for responsiveness

Imported Bootstrap variables and updated styling to use responsive media breakpoints. Adjusted positioning of toggle buttons to ensure proper alignment on different screen sizes.
---
 .../CommentEditor/CommentEditor.vue           | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue
index 7ebd78cf1..d6019fabe 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue
@@ -24,7 +24,6 @@ const toggleButtonClass = computed(() => {
 });
 
 const toggleEditor = () => {
-    console.log("toggleEditor");
     let newValue;
 
     newValue = kind.value === "simple" ? "rich" : "simple";
@@ -32,8 +31,6 @@ const toggleEditor = () => {
     window.localStorage.setItem(EDITOR_MODE_KEY, newValue);
 
     window.dispatchEvent(new Event("toggleEditorKind"));
-
-    console.log("new storage", window.localStorage.getItem(EDITOR_MODE_KEY));
 };
 
 const onKindChange = function (/* event: StorageEvent | Event */) {
@@ -96,6 +93,8 @@ onUnmounted(function () {
 </template>
 
 <style scoped lang="scss">
+@import "ChillMainAssets/module/bootstrap/bootstrap";
+
 .toggle-button {
     background: white;
     border: none;
@@ -103,15 +102,17 @@ onUnmounted(function () {
     color: #069;
     cursor: pointer;
 
-    &.onEditor {
-        position: relative;
-        left: 1rem;
-        top: -1.5rem;
-    }
-    &.onSimple {
-        position: relative;
-        top: -0.75rem;
-        left: 1rem;
+    @include media-breakpoint-up(md) {
+        &.onEditor {
+            position: relative;
+            left: 1rem;
+            top: -1.5rem;
+        }
+        &.onSimple {
+            position: relative;
+            top: -0.75rem;
+            left: 1rem;
+        }
     }
 }