fix: UI tweaks for session details panel (#330)

make client session panel look more like a side panel. previously, with certain window width (~14" macbook) it looks like the side bar is not scrollable




----

| <a href="https://ellipsis.dev" target="_blank"><img src="https://avatars.githubusercontent.com/u/80834858?s=400&u=31e596315b0d8f7465b3ee670f25cea677299c96&v=4" alt="Ellipsis" width="30px" height="30px"/></a> | 🚀 This PR description was created by [Ellipsis](https://www.ellipsis.dev) for commit 7a30fd3.  | 
|--------|--------|

### Summary:
This PR improves the UI and usability of the session details panel by adjusting the `Drawer` properties, adding a `d-flex` class, and introducing a close button.

**Key points**:
- Modified `overlayOpacity` and `size` properties of `Drawer` in `SessionSidePanel` component.
- Added `d-flex` class to a `div` element.
- Added a new `Button` component for closing the panel.


----
Generated with ❤️ by [ellipsis.dev](https://www.ellipsis.dev)

packages/app/src/SessionSidePanel.tsx

@@ -67,15 +67,15 @@ export default function SessionSidePanel({
     <Drawer
       customIdSuffix={`session-side-panel-${sessionId}`}
       duration={0}
-      overlayOpacity={0.2}
+      overlayOpacity={0.5}
       open={sessionId != null}
       onClose={() => {
         if (!subDrawerOpen) {
           onClose();
         }
       }}
       direction="right"
-      size={'85vw'}
+      size={'82vw'}
       style={{ background: '#0F1216' }}
       className="border-start border-dark"
       zIndex={zIndex}
@@ -99,7 +99,7 @@ export default function SessionSidePanel({
                 <span>{session?.sessionCount} Events</span>
               </div>
             </div>
-            <div>
+            <div className="d-flex">
               <CopyToClipboard
                 text={window.location.href}
                 onCopy={() => {
@@ -115,6 +115,14 @@ export default function SessionSidePanel({
                   Share Session
                 </Button>
               </CopyToClipboard>
+              <Button
+                variant="dark"
+                className="text-muted-hover d-flex align-items-center"
+                size="sm"
+                onClick={onClose}
+              >
+                <i className="bi bi-x-lg" />
+              </Button>
             </div>
           </div>
         </div>