fix(MessagesTable): improve responsive layout for message logs (#45465)

## I have read the CONTRIBUTING.md file.
YES

## What kind of change does this PR introduce?
Bug fix

## What is the current behavior?
The Realtime Inspector panel breaks at smaller viewport sizes, causing
content
to overflow and overlap, making it unusable on mobile and resized
windows.

Fixes #45464

## What is the new behavior?
The Realtime Inspector panel is now responsive and displays correctly
across
all viewport sizes.


https://github.com/user-attachments/assets/8103a695-b5a1-4498-b523-c25afc0b5b37



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

## Summary by CodeRabbit

* **Style**
* Improved the messages table with enhanced responsive design. The
layout now automatically adapts based on screen size: on mobile and
smaller screens, panes stack vertically for optimal readability; on
larger displays, they appear side-by-side to enable efficient content
comparison and provide a more comprehensive viewing experience.

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

Co-authored-by: Ali Waseem <waseema393@gmail.com>

apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx

@@ -148,8 +148,13 @@ const MessagesTable = ({
     <>
       <section className="flex w-full flex-col md:max-h-[calc(100vh-var(--header-height)-3rem)]">
         <ShimmerLine active={enabled} />
-        <div className={cn('flex h-full flex-row', enabled ? 'border-brand-400' : null)}>
-          <div className="flex grow flex-col">
+        <div
+          className={cn(
+            'grid grid-rows-2 grid-cols-1 lg:flex h-full lg:flex-row',
+            enabled ? 'border-brand-400' : null
+          )}
+        >
+          <div className="flex grow flex-col lg:w-1/2">
             {enabled && (
               <div className="w-full h-9 px-4 bg-surface-100 items-center inline-flex justify-between text-foreground-light">
                 <div className="inline-flex gap-2.5 text-xs">
@@ -224,7 +229,8 @@ const MessagesTable = ({
               }}
             />
           </div>
-          <div className="flex w-1/2 flex-col">
+
+          <div className="flex lg:w-1/2 flex-col">
             <MessageSelection onClose={() => setFocusedLog(null)} log={focusedLog} />
           </div>
         </div>