From 8f2a66af025818032e441718b2053f6a3994eb92 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Fri, 24 Apr 2020 16:51:47 +0200 Subject: [PATCH] Fix horizontal scrollbar and title+description alignment and ellipsis Signed-off-by: Jan-Christoph Borchardt --- src/views/Create.vue | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/views/Create.vue b/src/views/Create.vue index 68e9782..96741ea 100644 --- a/src/views/Create.vue +++ b/src/views/Create.vue @@ -383,19 +383,21 @@ export default { #form-title, #form-desc { width: 100%; - margin: 10px; // aerate the header - padding: 0; // makes alignment and desc height calc easier + margin: 16px 0; // aerate the header + padding: 0 16px; border: none; } #form-title { font-size: 2em; + padding-left: 14px; // align with description (compensate font size diff) + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } #form-desc { - // make sure height calculations are correct - box-sizing: content-box !important; min-height: 60px; max-height: 200px; - padding-left: 2px; // align with title (compensate font size diff) + margin-top: 0; resize: none; } }