From 98ac25e7e1a02f60c8fb76fce35547cba14aab37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marina=20L=C3=B3pez?= <marina.lopez.yap@gmail.com>
Date: Tue, 5 Sep 2023 09:18:55 +0200
Subject: [PATCH] fix(styles): i#3957 adapt layout comment data

---
 .../comment-single/comment-single.component.css   | 15 +++++++++++++++
 .../comment-single/comment-single.component.html  |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.css b/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.css
index 5b83b69fa..b9a50e6d2 100644
--- a/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.css
+++ b/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.css
@@ -10,6 +10,7 @@ Copyright (c) 2023-present Kaleidos INC
 @import url("../../styles/delete-comment-confirm.css");
 
 :host() {
+  container-type: inline-size;
   display: block;
 }
 
@@ -108,3 +109,17 @@ Copyright (c) 2023-present Kaleidos INC
 .former-user-avatar {
   --no-user-avatar-size: 24px;
 }
+
+@container (inline-size < 280px) {
+  .comment-top {
+    align-items: flex-start;
+  }
+
+  .creation-data {
+    flex-direction: column;
+  }
+
+  .separator {
+    display: none;
+  }
+}
diff --git a/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.html b/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.html
index 08723612d..b807c5ae8 100644
--- a/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.html
+++ b/javascript/apps/taiga/src/app/shared/comments/components/comment-single/comment-single.component.html
@@ -48,7 +48,7 @@
               class="former-user-text"
               >{{ t('commons.former_user') }}</span
             >
-            <span>∙</span>
+            <span class="separator">∙</span>
             <span
               *ngIf="comment.createdAt"
               [title]="comment.createdAt | date: 'medium'"