diff --git a/web/src/ui/RoomView.css b/web/src/ui/RoomView.css
index fd10288..f6262ea 100644
--- a/web/src/ui/RoomView.css
+++ b/web/src/ui/RoomView.css
@@ -2,7 +2,6 @@ div.room-view {
overflow: hidden;
height: 100%;
display: grid;
- border-left: 2px solid #ccc;
grid-template:
"header" 3rem
"messageview" 1fr
@@ -14,7 +13,7 @@ div.room-view {
align-items: center;
gap: .5rem;
padding-left: 1rem;
- border-bottom: 2px solid #ccc;
+ border-bottom: 1px solid #ccc;
> span.room-name {
font-weight: bold;
diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css
index 6ca52b9..8cb768c 100644
--- a/web/src/ui/roomlist/RoomList.css
+++ b/web/src/ui/roomlist/RoomList.css
@@ -1,60 +1,67 @@
-div.room-list {
+div.room-list-wrapper {
grid-area: roomlist;
+ background: linear-gradient(in hsl longer hue, red 0 0, magenta);
+ box-sizing: border-box;
overflow-y: auto;
+}
- div.room-entry {
+div.room-list {
+ background-color: hsla(0, 0%, 96%, .9);
+ min-height: 100vh;
+}
+
+div.room-entry {
+ width: 100%;
+ display: flex;
+ gap: 4px;
+ /*border-radius: 4px;*/
+ user-select: none;
+ cursor: pointer;
+
+ &:hover {
+ background-color: rgba(5, 38, 87, 0.1);
+ }
+
+ &.active {
+ background-color: rgba(5, 38, 87, 0.15);
+ }
+
+ > div.room-entry-left {
+ height: 3rem;
+ width: 3rem;
+
+ > img.room-avatar {
+ padding: 4px;
+ }
+ }
+
+ > div.room-entry-right {
width: 100%;
display: flex;
- gap: 4px;
- /*border-radius: 4px;*/
- user-select: none;
- cursor: pointer;
+ flex-direction: column;
+ overflow: hidden;
+ justify-content: space-around;
- &:hover {
- background-color: #EEE;
- }
-
- &.active {
- background-color: #DDD;
- }
-
- > div.room-entry-left {
- height: 3rem;
- width: 3rem;
-
- > img.room-avatar {
- padding: 4px;
- }
- }
-
- > div.room-entry-right {
- width: 100%;
- display: flex;
- flex-direction: column;
+ > div.room-name {
+ font-weight: bold;
overflow: hidden;
- justify-content: space-around;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
- > div.room-name {
- font-weight: bold;
+ > div.message-preview {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
+ > span.sender-name {
+ display: block;
+ max-width: 6rem;
overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
}
- > div.message-preview {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-
- > span.sender-name {
- display: block;
- max-width: 6rem;
- overflow: hidden;
- }
-
- > span.preview-text {
- display: block;
- }
+ > span.preview-text {
+ display: block;
}
}
}
diff --git a/web/src/ui/roomlist/RoomList.tsx b/web/src/ui/roomlist/RoomList.tsx
index 8d5080b..fa03624 100644
--- a/web/src/ui/roomlist/RoomList.tsx
+++ b/web/src/ui/roomlist/RoomList.tsx
@@ -14,8 +14,8 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see