fixed long texts causing screen overflow

This commit is contained in:
DJ2LS 2024-05-01 10:12:51 +02:00
parent d3f378ec43
commit 0d8cd1e13d
5 changed files with 12 additions and 17 deletions

View file

@ -118,22 +118,18 @@ watch(
</script>
<template>
<div class="container-fluid">
<div class="row">
<div class="container-fluid d-flex">
<!-- Chat Conversations -->
<div class="col-3 bg-light p-0">
<div class="bg-light p-0" style="width: 250px">
<div class="container-fluid overflow-auto p-0">
<chat_conversations />
</div>
<div
class="list-group overflow-auto"
id="list-tab-chat"
role="tablist"
></div>
<div class="list-group overflow-auto" id="list-tab-chat" role="tablist"></div>
</div>
<!-- Chat Messages -->
<div class="col-9 border-start p-0">
<div class="flex-grow-1 border-start p-0">
<div class="d-flex flex-column">
<!-- Top Navbar -->
<nav class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
@ -169,6 +165,5 @@ watch(
<chat_new_message />
</div>
</div>
</div>
</div>
</template>

View file

@ -11,7 +11,7 @@
</div>
<div class="card-body">
<p class="card-text">{{ message.msg }}</p>
<p class="card-text text-break">{{ message.msg }}</p>
</div>
<div class="card-footer p-0 bg-light border-top-0">

View file

@ -25,7 +25,7 @@
</div>
<div class="card-body">
<p class="card-text">{{ message.msg }}</p>
<p class="card-text text-break">{{ message.msg }}</p>
</div>
<div class="card-footer p-0 bg-primary border-top-0">

View file

@ -23,7 +23,7 @@
</div>
<div class="card-body">
<p class="card-text">{{ message.body }}</p>
<p class="card-text text-break">{{ message.body }}</p>
</div>
<div class="card-footer p-0 bg-light border-top-0">

View file

@ -46,8 +46,8 @@
</div>
</div>
<div class="card-body w-100">
<p class="card-text w-100">{{ message.body }}</p>
<div class="card-body">
<p class="card-text text-break">{{ message.body }}</p>
</div>
<div class="card-footer p-0 bg-secondary border-top-0">
@ -167,9 +167,9 @@ export default {
if (this.message.body.length <= 50) {
return "col-4";
} else if (this.message.body.length <= 100) {
return "col-5";
return "col-6";
} else {
return "col-5";
return "col-8";
}
},