Add edit and delete buttons under comments, and split <style> from PdfViewer to Comments and Comment components

src/components/comments/Comments.vue

@@ -24,7 +24,7 @@
             <span>Retour à la liste</span>
           </button>
           <Comment :comment="openedComment" data-opened="true" />
-          <div v-if="sortedReplies.length > 0" class="replies">
+          <div v-if="sortedReplies.length > 0" class="replies | flow">
             <Comment
               v-for="(reply, commentIndex) in sortedReplies"
               :comment="reply"
@@ -155,3 +155,57 @@ async function addComment(newComment) {
   emits("update:file", newFile);
 }
 </script>
+
+<style>
+/* Comments */
+#toggle-comments {
+  position: absolute;
+  right: var(--space-16);
+  bottom: var(--space-16);
+  padding: 0.625rem;
+}
+#comments-container {
+  background-color: black;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 4.5rem;
+  width: var(--comments-w);
+  padding: var(--space-24) var(--space-32);
+}
+.comments {
+  overflow-y: auto;
+  height: calc(100% - 3.5rem);
+  margin-bottom: 1rem;
+  margin-right: -2rem;
+  padding-right: 2rem;
+}
+#comments-container form {
+  --flow-space: 0.5rem;
+  flex-direction: column;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 5.5rem;
+}
+#comments-container textarea {
+  position: sticky;
+  bottom: 0;
+  margin: 0;
+  resize: none;
+  background: none;
+  padding: 0;
+  color: var(--color-white);
+}
+#comments-container textarea:focus {
+  outline: none;
+}
+::placeholder {
+  color: var(--color-white-50);
+}
+#comments-container form footer {
+  gap: var(--space-12);
+}
+#comments-container form footer > * {
+  flex-grow: 1;
+}
+</style>