fix long word input

DanZalov · Mar 11, 2024 · bbfb7c0 · bbfb7c0
1 parent dd65781
commit bbfb7c0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -48,18 +48,12 @@ span.myinput {
   cursor: pointer;
 }
 
-.icon-edit {
-  position: absolute;
-  transform: translateY(-50%);
-  top: 55%;
-  right: 10px;
-}
-
 .mybtn {
   color: #fff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
+  max-height: 38px;
 }
 
 .mybtn .mobile {

diff --git a/src/views/TasksView.vue b/src/views/TasksView.vue
@@ -35,10 +35,12 @@ function openForm(id: string) {
           @close="form.show = false"
         />
         <span v-else @click="openForm(task.id)" class="myinput">
-          {{ task.title }}
-          <div class="icon-edit">
-            <IconEdit :size="16" />
-          </div>
+          <span class="title"
+            >{{ task.title }}
+            <div class="icon-edit">
+              <IconEdit :size="16" />
+            </div>
+          </span>
         </span>
         <button
           class="mybtn danger"
@@ -64,12 +66,25 @@ ul {
 li {
   display: flex;
   margin-bottom: 10px;
+  align-items: center;
 }
 
 hr {
   margin: 20px 0px;
 }
 
+.title {
+  word-break: break-word;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.icon-edit {
+  margin: 0px 5px;
+}
+
 @media (min-width: 768px) {
   h1 {
     padding-bottom: 0.5rem;