Remove "TODO" tasks from CSS file (#26835)

1. Use `gt-invisible` instead of `invisible`.
2. Use `gt-word-break` instead of `dont-break-out` (there is a slight
different "hyphens", but I think it won't affect too much since it is
only used for the "full name").
3. Remove `.small.button:has(svg)` , now our buttons could layout SVG
correctly, and actually I didn't see this CSS class is used in code.

4 files changed, 8 insertions, 28 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 7c65b6aaf1..20ddf01486 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -506,13 +506,6 @@ a.label,
   border-right-color: var(--color-primary);
 }
 
-/* fix button enlarged vertically by svg icon */
-/* TODO: change to just `.small.button:has(svg)` but may have global side effects */
-.ui.action.input .small.button:has(svg) {
-  padding-top: 7px !important;
-  padding-bottom: 7px !important;
-}
-
 .ui.menu,
 .ui.vertical.menu {
   background: var(--color-menu);
@@ -953,14 +946,6 @@ img.ui.avatar,
   filter: saturate(2);
 }
 
-/* TODO: use gt-word-break instead */
-.dont-break-out {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-all;
-  hyphens: auto;
-}
-
 .full.height {
   flex-grow: 1;
   padding-bottom: 80px;
@@ -2014,11 +1999,6 @@ a.ui.basic.label:hover {
   margin-left: 0;
 }
 
-/* TODO: replace it with gt-invisible */
-.invisible {
-  visibility: hidden;
-}
-
 .ui.segment,
 .ui.segments,
 .ui.attached.segment {
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index b79ca0f5b1..864b28a3bb 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -64,9 +64,9 @@ function initRepoDiffConversationForm() {
 
     $form.closest('.conversation-holder').replaceWith($newConversationHolder);
     if ($form.closest('tr').data('line-type') === 'same') {
-      $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('invisible');
+      $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('gt-invisible');
     } else {
-      $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('invisible');
+      $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('gt-invisible');
     }
     $newConversationHolder.find('.dropdown').dropdown();
     initCompReactionSelector($newConversationHolder);
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 194ffca57c..4f4103bb21 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -110,7 +110,7 @@ export function initRepoIssueSidebarList() {
             }
             filteredResponse.results.push({
               name: `#${issue.number} ${htmlEscape(issue.title)
-              }<div class="text small dont-break-out">${htmlEscape(issue.repository.full_name)}</div>`,
+              }<div class="text small gt-word-break">${htmlEscape(issue.repository.full_name)}</div>`,
               value: issue.id,
             });
           });
@@ -178,9 +178,9 @@ export function initRepoIssueCommentDelete() {
           const idx = $conversationHolder.data('idx');
           const lineType = $conversationHolder.closest('tr').data('line-type');
           if (lineType === 'same') {
-            $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('invisible');
+            $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('gt-invisible');
           } else {
-            $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible');
+            $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('gt-invisible');
           }
           $conversationHolder.remove();
         }
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 3b25c36538..51edf0bd12 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -150,7 +150,7 @@ export function initRepoCommentForm() {
 
         if ($(this).hasClass('checked')) {
           $(this).removeClass('checked');
-          $(this).find('.octicon-check').addClass('invisible');
+          $(this).find('.octicon-check').addClass('gt-invisible');
           if (hasUpdateAction) {
             if (!($(this).data('id') in items)) {
               items[$(this).data('id')] = {
@@ -164,7 +164,7 @@ export function initRepoCommentForm() {
           }
         } else {
           $(this).addClass('checked');
-          $(this).find('.octicon-check').removeClass('invisible');
+          $(this).find('.octicon-check').removeClass('gt-invisible');
           if (hasUpdateAction) {
             if (!($(this).data('id') in items)) {
               items[$(this).data('id')] = {
@@ -215,7 +215,7 @@ export function initRepoCommentForm() {
 
       $(this).parent().find('.item').each(function () {
         $(this).removeClass('checked');
-        $(this).find('.octicon-check').addClass('invisible');
+        $(this).find('.octicon-check').addClass('gt-invisible');
       });
 
       if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') {