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.

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;
+        }
     }
 }