[FE-3895] fix(studio): fit unified logs table to mobile viewport (#47930)

The unified logs table has a fixed content width of ~1400px, so on
mobile it overflowed the viewport — columns were clipped and the header
appeared misaligned with the rows (the underlying columns were actually
aligned; the table just didn't fit).

**Changed:**
- Progressively hide the three widest columns on narrow viewports via
responsive display classes: `method` from `sm`, `pathname` from `md`,
`event message` from `lg`.
- On phones only the essential columns remain (checkbox, level, date,
log type, status), so the table fits with no horizontal scroll.
- Desktop (≥`lg`) is unchanged — all columns render exactly as before.

Full row data (method/pathname/event message) is still accessible by
clicking a row to open the detail panel.

## To test

- Open a project's **Logs** (Unified Logs preview) at a mobile width
(~390px), with some API log rows in range.
- Confirm the table fits the screen — no horizontal scroll/clipping —
and the `DATE` header sits cleanly above the dates.
- Widen the browser: `method` appears ~640px, `pathname` ~768px, `event
message` ~1024px.
- At desktop width, confirm all columns show and header/rows line up as
before.
- Tap a row on mobile → detail panel opens with the full log (method,
pathname, event message).

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
  * Improved responsive table layouts for unified logs.
* Columns now adapt visibility based on screen size, keeping key
information accessible on narrow displays.
  * Event messages flex more naturally when visible.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>

apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx

@@ -198,8 +198,11 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
       minSize: 64,
       maxSize: 64,
       meta: {
-        cellClassName: 'font-mono tracking-tight w-[64px]',
-        headerClassName: 'w-[64px]',
+        // Hidden on narrow viewports so the table fits mobile without horizontal
+        // overflow; revealed from `sm` up. Full row detail is still available via
+        // the ServiceFlow panel on row click.
+        cellClassName: 'font-mono tracking-tight w-[64px] hidden sm:table-cell',
+        headerClassName: 'w-[64px] hidden sm:table-cell',
       },
     },
     // Pathname column - controlled by columnVisibility
@@ -213,8 +216,9 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
       minSize: 250,
       maxSize: 250,
       meta: {
-        cellClassName: 'font-mono tracking-tight w-[250px]',
-        headerClassName: 'w-[250px]',
+        // Hidden until `md` — wider than method, so it earns space one step later.
+        cellClassName: 'font-mono tracking-tight w-[250px] hidden md:table-cell',
+        headerClassName: 'w-[250px] hidden md:table-cell',
       },
       cell: ({ row }) => {
         const value = row.getValue<ColumnFilterSchema['pathname']>('pathname') ?? ''
@@ -269,7 +273,10 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
       minSize: 200,
       maxSize: 400,
       meta: {
-        cellClassName: 'font-mono tracking-tight',
+        // Widest column — hidden until `lg`. No width class so it keeps flexing to
+        // fill remaining space once shown.
+        cellClassName: 'font-mono tracking-tight hidden lg:table-cell',
+        headerClassName: 'hidden lg:table-cell',
       },
     },
   ]