diff --git a/src/css/todo.css b/src/css/todo.css index 372cf4e..fa32e97 100644 --- a/src/css/todo.css +++ b/src/css/todo.css @@ -125,11 +125,17 @@ h2 { margin-bottom: 20px; } +.todo-container { + display: flex; + align-items: center; +} + .todo-checkbox { appearance: none; /* to remove default checkbox appearance */ -webkit-appearance: none; /* for Safari */ margin-right: 10px; - position: relative; /* to position the pseudo-elements */ + flex-shrink: 0; + position: relative; width: 18px; /* desired width */ height: 18px; /* desired height */ border: 2px solid var(--secondary-color); /* border color */ @@ -149,6 +155,14 @@ h2 { border-radius: 50%; /* make it circular */ } +.todo-text { + /* Your existing styles */ + overflow: hidden; /* Hides overflow */ + text-overflow: ellipsis; /* Adds an ellipsis to truncated text */ + flex-grow: 1; /* Allows the text to grow if there's extra space */ +} + + #buttonSection { display: flex; justify-content: space-between; diff --git a/src/js/todo/todoTabMenuManager.js b/src/js/todo/todoTabMenuManager.js index 1122ed7..460acb4 100644 --- a/src/js/todo/todoTabMenuManager.js +++ b/src/js/todo/todoTabMenuManager.js @@ -152,6 +152,9 @@ async function switchTab(tabId) { span.className = 'todo-text'; span.textContent = task.title; span.style.textDecoration = task.status === 'completed' ? 'line-through' : 'none'; + span.style.whiteSpace = 'nowrap'; + span.style.overflow = 'hidden'; + span.style.textOverflow = 'ellipsis'; container.appendChild(span); li.appendChild(container);