add breakpoints for timestamp width

wireapp · Sep 27, 2022 · b49fb48 · b49fb48
1 parent f3b8435
commit b49fb48
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/src/style/common/variables.less b/src/style/common/variables.less
@@ -201,7 +201,13 @@ body {
 
 @conversation-message-max-width: 640px;
 @conversation-message-sender-width: 56px;
-@conversation-message-timestamp-width: 170px;
+
+body {
+  --conversation-message-timestamp-width: 170px;
+  @media (max-width: @screen-lg-min) {
+    --conversation-message-timestamp-width: 55px;
+  }
+}
 
 // ----------------------------------------------------------------------------
 // Conversation Input

diff --git a/src/style/content/conversation/input-bar.less b/src/style/content/conversation/input-bar.less
@@ -45,7 +45,9 @@
   .reset-textarea;
 
   width: 100%;
-  max-width: @conversation-max-width - @conversation-message-sender-width - @conversation-message-timestamp-width;
+  max-width: calc(
+    @conversation-max-width - @conversation-message-sender-width - var(--conversation-message-timestamp-width)
+  );
   height: @conversation-input-line-height;
   min-height: @conversation-input-line-height;
   max-height: @conversation-input-max-height;
@@ -122,7 +124,7 @@
   .list-unstyled;
 
   display: flex;
-  min-width: @conversation-message-timestamp-width;
+  min-width: var(--conversation-message-timestamp-width);
   align-items: center;
   justify-content: flex-end;
   margin: 0;

diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
@@ -249,7 +249,7 @@
 }
 
 .message-header-line {
-  min-width: @conversation-message-timestamp-width;
+  min-width: var(--conversation-message-timestamp-width);
   height: 1px;
   flex: 1;
   border: none;
@@ -287,7 +287,7 @@
 
   &:not(.message-timestamp-day) {
     border: 0;
-    margin-right: @conversation-message-timestamp-width;
+    margin-right: var(--conversation-message-timestamp-width);
 
     .message-header-label {
       border-bottom: 1px dotted @separator-color;
@@ -314,7 +314,7 @@
 // MESSAGE - BODY
 .message-body {
   position: relative;
-  padding-right: @conversation-message-timestamp-width;
+  padding-right: var(--conversation-message-timestamp-width);
   padding-left: @conversation-message-sender-width;
   margin-top: -5px;
 
@@ -467,7 +467,7 @@
   width: 100%;
   flex-wrap: wrap;
   margin-top: 4px;
-  margin-right: @conversation-message-timestamp-width;
+  margin-right: var(--conversation-message-timestamp-width);
   margin-left: @conversation-message-sender-width;
 
   > *:not(:last-child) {
@@ -504,7 +504,7 @@
   top: 0;
   right: 0;
   display: flex;
-  width: @conversation-message-timestamp-width;
+  width: var(--conversation-message-timestamp-width);
   height: @line-height-lg;
   align-items: center;
 

diff --git a/src/style/content/conversation/message-quote.less b/src/style/content/conversation/message-quote.less
@@ -1,6 +1,6 @@
 .message-quote {
   position: relative;
-  padding-right: @conversation-message-timestamp-width;
+  padding-right: var(--conversation-message-timestamp-width);
   padding-left: @conversation-message-sender-width + 16;
   margin-bottom: 10px;
   font-size: 14px;