Refactor text utility classes to Tailwind CSS (#36703)

Replace Fomantic/custom CSS text utility classes with their Tailwind
equivalents:

- `.text.<color>` compound classes → `tw-text-<color>` classes
- `.text.small` (`font-size: 0.75em`) → `tw-text-xs` (11px)
- `.text.truncate` (`overflow-x: hidden; text-overflow: ellipsis;
white-space: nowrap; display: inline-block`) → `tw-inline-block
tw-truncate`

Remove the now-unused CSS rules from `base.css` and `dashboard.css`.

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

web_src/js/components/ContextPopup.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
-import {getIssueColor, getIssueIcon} from '../features/issue.ts';
+import {getIssueColorClass, getIssueIcon} from '../features/issue.ts';
 import {computed, onMounted, shallowRef} from 'vue';
 import type {Issue} from '../types.ts';
 
@@ -53,7 +53,7 @@ onMounted(async () => {
         on {{ createdAt }}
       </div>
       <div class="flex-text-block">
-        <svg-icon :name="getIssueIcon(issue)" :class="['text', getIssueColor(issue)]"/>
+        <svg-icon :name="getIssueIcon(issue)" :class="getIssueColorClass(issue)"/>
         <span class="issue-title tw-font-semibold tw-break-anywhere">
           {{ issue.title }}
           <span class="index">#{{ issue.number }}</span>