Browse Source

[bugfix] overflow

isundil 8 năm trước cách đây
mục cha
commit
be764abe96
1 tập tin đã thay đổi với 7 bổ sung4 xóa
  1. 7 4
      srv/public/style.css

+ 7 - 4
srv/public/style.css

@@ -65,7 +65,9 @@ body { display: flex; margin: 0; padding: 0; font-family: Lato, sans-serif; heig
 .slackmsg-item:hover { background: #F9F9F9; }
 .slackmsg-item.slackmsg-first-unread { border-top: 1px solid rgba(255,135,109,.5); }
 .slackmsg-item.slackmsg-first-unread::before { display: inline-block; position: absolute; right: 0; top: -0.8em; content: "New"; color: rgba(255,135,109,.5); background: white; padding: 0 5px 0 3px; font-style: italic; }
-.slackmsg-content { display: inline-block; }
+.slackmsg-content { display: inline-block; width: 100%; }
+.slackmsg-content .slackmsg-msg, .slackmsg-content .slackmsg-msg *,
+.slackmsg-content .slackmsg-attachments, .slackmsg-content .slackmsg-attachments * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
 .slackmsg-author { display: inline-block; }
 .slackmsg-author-img-wrapper { height: 36px; width: 36px; margin-right: 10px; }
 .slackmsg-author-img { max-height: 36px; max-width: 36px; border-radius: 3px; }
@@ -152,11 +154,12 @@ body { display: flex; margin: 0; padding: 0; font-family: Lato, sans-serif; heig
 .file-upload-container input { display: block; }
 .file-upload-error { margin: 1em 0; padding: 0.5em 1.5em; background: #ffa2a2; }
 
-.emoji-small { position: relative; display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
+.emoji { max-width: initial!important; }
+.emoji-small { position: relative; display: inline-block; max-width: initial!important; width: 20px; height: 20px; vertical-align: middle; }
 .emoji-small .emoji { transform: scale(0.3); position: absolute; left: -24px; top: -24px; }
-.emoji-medium { position: relative; display: inline-block; width: 30px; height: 30px; vertical-align: middle; }
+.emoji-medium { position: relative; display: inline-block; max-width: initial!important; width: 30px; height: 30px; vertical-align: middle; }
 .emoji-medium .emoji { transform: scale(0.5); position: absolute; left: -19px; top: -16px; }
-.emoji-custom { text-indent: -9999em; image-rendering: optimizeQuality; font-size: inherit; height: 64px; width: 64px; top: -3px; position: relative; display: inline-block; margin: 0 .15em; line-height: normal; vertical-align: middle; background-repeat: no-repeat; background-size: contain; }
+.emoji-custom { text-indent: -9999em; image-rendering: optimizeQuality; font-size: inherit; max-width: initial!important; height: 64px; width: 64px; top: -3px; position: relative; display: inline-block; margin: 0 .15em; line-height: normal; vertical-align: middle; background-repeat: no-repeat; background-size: contain; }
 
 .emojibar { position: fixed; display: flex; flex-direction: column; height: 300px; width: 300px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding: 5px; overflow: hidden; background: #ddd; z-index: 1000; text-align: right; }
 .emojibar-emojis { display: block; flex: 1; width: 100%; overflow: auto; text-align: left; }