fix: avatar presence icon position

1 files changed, 59 insertions, 33 deletions

diff --git a/assets/style.scss b/assets/style.scss
index 7bdffa0..4078aa1 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -143,7 +143,9 @@ p {
   margin: 0;
 }
 
-.chats-list, .roster-list, .settings-sidebar {
+.chats-list,
+.roster-list,
+.settings-sidebar {
   border-width: 0 2px 0 0;
   border-color: black;
   border-style: solid;
@@ -165,15 +167,20 @@ p {
   padding: 8px 16px;
 }
 
-.settings-sidebar>.open, .settings-sidebar>*:hover {
+.settings-sidebar>.open,
+.settings-sidebar>*:hover {
   background: #00000060;
 }
 
-.chats-list>*, .roster-list>*, .settings .header {
+.chats-list>*,
+.roster-list>*,
+.settings .header {
   padding: 8px 16px;
 }
 
-.chats-list .header, .roster-list .header, .settings .header {
+.chats-list .header,
+.roster-list .header,
+.settings .header {
   margin-top: 0.4rem;
   border-bottom: 2px solid black;
   display: flex;
@@ -181,33 +188,38 @@ p {
   align-items: center;
 }
 
-.chats-list h2, .roster-list h2 {
+.chats-list h2,
+.roster-list h2 {
   flex: 0 0 auto;
 }
 
-.chats-list-item, .roster-list-item, {
-  display: flex;
-  align-items: start;
-  gap: 8px;
-  border-radius: 1em;
-  padding: 0.5em;
-  margin: 0.5em 0;
-  box-sizing: border-box;
-  align-items: stretch;
+.chats-list-item,
+.roster-list-item,
+{
+display: flex;
+align-items: start;
+gap: 8px;
+border-radius: 1em;
+padding: 0.5em;
+margin: 0.5em 0;
+box-sizing: border-box;
+align-items: stretch;
 }
 
 .chats-list-item:hover,
 .chats-list-item.open,
 .roster-list-item:hover,
-.roster-list-item.open, {
-  background: #00000060;
-  /* color: black; */
-  /* border: 2px solid black; */
-  /* box-shadow: inset 0px -0.75em 0.5em #19311F, 0 0.25em 0.25em #00000048; */
-  /* background: linear-gradient(0deg, #364B3B 0%, #19311F 100%); */
+.roster-list-item.open,
+{
+background: #00000060;
+/* color: black; */
+/* border: 2px solid black; */
+/* box-shadow: inset 0px -0.75em 0.5em #19311F, 0 0.25em 0.25em #00000048; */
+/* background: linear-gradient(0deg, #364B3B 0%, #19311F 100%); */
 }
 
-.chats-list-item .item-info, .roster-list-item .item-info {
+.chats-list-item .item-info,
+.roster-list-item .item-info {
   width: 0;
   display: flex;
   flex: 1 1 auto;
@@ -215,22 +227,26 @@ p {
   justify-content: space-between;
 }
 
-.chats-list-item .main-info, .roster-list-item .main-info {
+.chats-list-item .main-info,
+.roster-list-item .main-info {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
 }
 
-.chats-list-item .name, .roster-list-item .name {
+.chats-list-item .name,
+.roster-list-item .name {
   font-weight: bold;
   font-size: 1.1em;
 }
 
-.chats-list-item .name, .roster-list-item .name {
+.chats-list-item .name,
+.roster-list-item .name {
   font-weight: light;
 }
 
-.chats-list-item .sub-info, .roster-list-item .sub-info {
+.chats-list-item .sub-info,
+.roster-list-item .sub-info {
   display: flex;
 }
 
@@ -259,12 +275,14 @@ p {
   height: 48px;
 }
 
-.chats-list-item .avatar, .roster-list-item .avatar {
+.chats-list-item .avatar,
+.roster-list-item .avatar {
   width: 48px;
   height: 48px;
 }
 
-.chats-list-chats, .roster-list-roster {
+.chats-list-chats,
+.roster-list-roster {
   flex-grow: 1;
   overflow: scroll;
 }
@@ -457,7 +475,8 @@ p {
   filter: invert(99%) sepia(1%) saturate(2689%) hue-rotate(208deg) brightness(106%) contrast(73%);
 }
 
-.chat-message.final .message-delivery, .visible {
+.chat-message.final .message-delivery,
+.visible {
   opacity: 100% !important;
 }
 
@@ -504,7 +523,8 @@ p {
   opacity: 100%;
 }
 
-.dock-item:hover .dock-pill, .dock-item.hovering .dock-pill {
+.dock-item:hover .dock-pill,
+.dock-item.hovering .dock-pill {
   top: calc(50% - 14px);
   height: 28px;
   opacity: 100%;
@@ -534,6 +554,7 @@ p {
 
 .avatar-with-presence {
   position: relative;
+  height: fit-content;
 }
 
 .avatar-with-presence>.presence-show-icon {
@@ -577,6 +598,7 @@ p {
   transition: left 0.2s ease-in;
   transition-behaviour: allow-discrete;
 }
+
 @starting-style {
   .sidebar .sidebar-hovering-drawer>* {
     /* TODO: allow to edit this width */
@@ -589,7 +611,8 @@ p {
   z-index: 100;
 }
 
-.overlay-background, .modal-background {
+.overlay-background,
+.modal-background {
   position: fixed;
   top: 0;
   left: 0;
@@ -674,6 +697,7 @@ p {
   font-size: 1.1em;
   font-weight: bold;
 }
+
 .personal-status-menu .user .jid {
   font-family: Diolce;
 }
@@ -697,8 +721,10 @@ hr {
   padding: 4px;
 }
 
-.new-chat:hover, .new-chat.open, 
-.add-contact:hover, .add-contact.open,
+.new-chat:hover,
+.new-chat.open,
+.add-contact:hover,
+.add-contact.open,
 .close:hover {
   background: #00000060;
 }
@@ -1417,4 +1443,4 @@ hr {
   font-weight: normal;
   font-style: italic;
   font-display: block;
-}
+}
\ No newline at end of file