fix(widget-builder): Slideout content cut off on medium screen (#82823)

Noticed that the Add Widget/Update Widget button was being cut off on
medium sized screens. Changing the height to `fill-available` solved
this. It also corrects the positioning of the widget preview (apparently
it wasn't completely in the centre before 😒).

| Before | After |
|--------|--------|
| <img width="934" alt="image"
src="https://github.com/user-attachments/assets/40e3224f-4eba-4951-9a61-07dfee9ab728"
/> | <img width="934" alt="image"
src="https://github.com/user-attachments/assets/c249bbdd-4ecb-4815-9712-58d29ff8adb9"
/> |

static/app/views/dashboards/widgetBuilder/components/newWidgetBuilder.tsx

@@ -299,6 +299,16 @@ const fullPageCss = css`
   left: 0;
 `;
 
+const fillAvailableCss = css`
+  height: 100%; /* default */
+  height: -webkit-fill-available; /* Chrome */
+  height: -moz-available; /* Firefox */
+  height: fill-available; /* others */
+  width: -webkit-fill-available; /* Chrome */
+  width: -moz-available; /* Firefox */
+  width: fill-available; /* others */
+`;
+
 const Backdrop = styled('div')`
   ${fullPageCss};
   z-index: ${p => p.theme.zIndex.widgetBuilderDrawer};
@@ -358,11 +368,8 @@ const WidgetBuilderContainer = styled('div')`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 100vh;
   position: fixed;
-  width: -webkit-fill-available; /* Chrome */
-  width: -moz-available; /* Firefox */
-  width: fill-available; /* others */
+  ${fillAvailableCss};
 `;
 
 const DroppableGrid = styled('div')`