jwed/dashboard-ticketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): add min-w-0/overflow-hidden to sidebar panes, truncate header text

Browse Source 
Closes dashboard-ticketing #5: sidebar and group switcher overflowed on 375px viewport.
Adds min-w-0 to aside and inner content div, truncates header labels. Settings tab nav
already had overflow-x-auto with shrink-0 tabs; no additional changes needed there.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Joel Wedemire
2026-04-19 22:12:49 -07:00
parent 9527147c32
commit ffb64078d8
2 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/Pages/Ticketing/Index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex h-screen overflow-hidden bg-gray-100 text-gray-900">
<div class="flex flex-col lg:flex-row h-screen overflow-hidden bg-gray-100 text-gray-900">
<!-- Bootstrap / first-run state -->
<div v-if="isBootstrap" class="flex flex-col items-center justify-center w-full h-full text-center px-6">
@@ -13,14 +13,14 @@
<template v-else>
<aside
class="w-full shrink-0 border-r border-gray-200 bg-white/90 backdrop-blur lg:flex lg:w-72 lg:flex-col"
class="min-w-0 w-full shrink-0 border-r border-gray-200 bg-white/90 backdrop-blur lg:flex lg:w-72 lg:flex-col overflow-y-auto lg:overflow-visible"
:class="showSidebar ? 'flex flex-col' : 'hidden'"
>
<div class="border-b border-gray-200 p-5">
<div class="flex items-center justify-between gap-3">
<div>
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-gray-400">Shared inbox</p>
<h1 class="mt-1 text-2xl font-semibold tracking-tight">Ticketing</h1>
<div class="min-w-0 overflow-hidden">
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-gray-400 truncate">Shared inbox</p>
<h1 class="mt-1 text-2xl font-semibold tracking-tight truncate">Ticketing</h1>
</div>
<div class="flex items-center gap-2">
<button
@@ -40,7 +40,7 @@
</div>
</div>
<div class="flex-1 space-y-6 overflow-y-auto p-5">
<div class="flex-1 min-w-0 space-y-6 overflow-y-auto p-5">
<section class="space-y-2">
<label class="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Group switcher</label>
<select
@@ -149,7 +149,7 @@
</aside>
<main
class="min-w-0 flex-1 border-r border-gray-200 bg-white xl:max-w-[34rem]"
class="min-w-0 w-full flex-1 border-r border-gray-200 bg-white xl:max-w-[34rem]"
:class="showList ? 'flex' : 'hidden lg:flex'"
>
<div class="flex min-w-0 flex-1 flex-col">
@@ -242,9 +242,9 @@
</div>
<div class="flex shrink-0 flex-col items-end justify-between gap-3">
<div class="text-xs font-medium text-gray-500">{{ ticket.priority?.name || 'No priority' }}</div>
<div class="text-xs font-medium text-gray-500 truncate max-w-[7rem]">{{ ticket.priority?.name || 'No priority' }}</div>
<div class="flex items-center gap-2">
<span class="text-[11px] uppercase tracking-[0.16em] text-gray-400">Assignee</span>
<span class="hidden sm:inline text-[11px] uppercase tracking-[0.16em] text-gray-400">Assignee</span>
<span
class="avatar-ring"
:class="ticket.assignee ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-200 text-gray-500'"
@@ -275,7 +275,7 @@
</main>
<section
class="min-w-0 flex-1 flex-col bg-gray-50"
class="min-w-0 w-full flex-1 flex-col bg-gray-50"
:class="showDetail ? 'flex' : 'hidden lg:flex'"
>
<div v-if="!ticketDetail" class="flex h-full items-center justify-center p-8">
@@ -311,9 +311,9 @@
</span>
</div>
<div class="mt-3 flex items-start gap-3">
<h3 class="min-w-0 flex-1 text-2xl font-semibold tracking-tight text-gray-900">{{ ticketDetail.title }}</h3>
<Link :href="route('ticketing.show', { ticket: ticketDetail.id })" class="text-sm font-medium text-indigo-600 transition hover:text-indigo-500">Open full page</Link>
<div class="mt-3 flex flex-wrap items-start gap-3">
<h3 class="min-w-0 flex-1 text-xl font-semibold tracking-tight text-gray-900 sm:text-2xl">{{ ticketDetail.title }}</h3>
<Link :href="route('ticketing.show', { ticket: ticketDetail.id })" class="shrink-0 text-sm font-medium text-indigo-600 transition hover:text-indigo-500">Open full page</Link>
</div>
</div>
</div>
@@ -348,11 +348,11 @@
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-3 text-sm text-gray-500">
<span>Group: <strong class="text-gray-700">{{ ticketDetail.group?.name || 'Unknown' }}</strong></span>
<span>•</span>
<div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-500">
<span class="truncate">Group: <strong class="text-gray-700">{{ ticketDetail.group?.name || 'Unknown' }}</strong></span>
<span aria-hidden="true" class="hidden sm:inline">•</span>
<span>{{ ticketDetail.messages?.length || 0 }} messages</span>
<span>•</span>
<span aria-hidden="true">•</span>
<span>{{ ticketDetail.attachments?.length || 0 }} attachments</span>
</div>
@@ -450,7 +450,7 @@
:placeholder="replyMode === 'internal' ? 'Internal note for agents only…' : 'Reply to the thread…'"
></textarea>
<div class="flex items-center justify-between gap-3">
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="text-xs text-gray-400">
{{ replyMode === 'internal' ? 'Only agents can see internal notes.' : 'Replies are visible in the ticket thread.' }}
</div>