mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
fixed long texts causing screen overflow
This commit is contained in:
parent
d3f378ec43
commit
0d8cd1e13d
5 changed files with 12 additions and 17 deletions
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in a new issue