From 40df3107c3de56b156ef0b4f4792d1993e02565a Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Thu, 28 Nov 2024 18:08:39 +0100
Subject: [PATCH] Fix virtual-sample static comments-container position

---
 src/assets/css/src/2.blocks.dialog.css               |  5 +++++
 src/components/comments/Comments.vue                 |  3 ---
 .../project/virtual-sample/VirtualSample.vue         | 12 +++++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
index 72e30d3..045425d 100644
--- a/src/assets/css/src/2.blocks.dialog.css
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -85,6 +85,11 @@
   gap: var(--space-8);
 }
 
+/* Comments */
+.static#virtual-sample #comments-container {
+  top: 8rem;
+}
+
 /* Footer */
 .dialog [data-pc-section="footer"] {
   height: var(--footer-h);
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index bde3d95..d2f366f 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -308,9 +308,6 @@ function openComment(comment) {
   margin: auto;
   font-size: var(--text-sm);
   color: var(--color-grey-400);
-  background-image: var(--icon-comment);
-  background-position: center;
-  background-repeat: no-repeat;
 }
 .comments.empty::before {
   --icon-size: 1.25rem;
diff --git a/src/components/project/virtual-sample/VirtualSample.vue b/src/components/project/virtual-sample/VirtualSample.vue
index eadfe29..334bceb 100644
--- a/src/components/project/virtual-sample/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@@ -11,22 +11,28 @@
     :closeOnEscape="true"
   >
     <template #header>
-      <div class="dialog__tabs">
+      <div class="dialog__tabs" role="tablist">
         <button
           v-if="step.files.dynamic"
+          type="button"
+          role="tab"
           class="btn btn--transparent | font-serif"
           data-icon="cursor"
           :aria-pressed="activeTab === 'dynamic' ? true : false"
+          aria-controls="dynamic"
           @click="activeTab = 'dynamic'"
         >
           <span>Vue Dynamique</span>
         </button>
         <button
           v-if="step.files.static"
+          type="button"
+          role="tab"
           @click="activeTab = 'static'"
           class="btn btn--transparent | font-serif"
           data-icon="image"
           :aria-pressed="activeTab === 'static' ? true : false"
+          aria-controls="static"
         >
           <span>Vue statique</span>
         </button>
@@ -34,8 +40,8 @@
       <h2 class="font-serif text-lg">Échantillon virtuel</h2>
     </template>
 
-    <DynamicView v-if="activeTab === 'dynamic'" />
-    <StaticView v-if="activeTab === 'static'" />
+    <DynamicView id="dynamic" v-if="activeTab === 'dynamic'" />
+    <StaticView id="static" v-if="activeTab === 'static'" />
 
     <template #footer>
       <a