fix(stories): improve loading/error layout (#95171)

Adjust stories layout when in a loading/error state.

**Before**
No screenshots, but the spinner and error were crammed in the lower
right corner of the page

**After**
<img width="1944" alt="layout-loading"
src="https://github.com/user-attachments/assets/db902b59-ce85-48b1-ada5-f435b49c0c3f"
/>
<img width="1943" alt="layout-error"
src="https://github.com/user-attachments/assets/97e9c9ef-8571-4f63-9fe7-1f745739507e"
/>

Author: natemoo-re

static/app/stories/view/index.tsx

@@ -42,11 +42,11 @@ export default function Stories() {
           <StorySidebar />
 
           {story.isLoading ? (
-            <VerticalScroll style={{gridArea: 'body'}}>
+            <VerticalScroll>
               <LoadingIndicator />
             </VerticalScroll>
           ) : story.isError ? (
-            <VerticalScroll style={{gridArea: 'body'}}>
+            <VerticalScroll>
               <Alert.Container>
                 <Alert type="error" showIcon>
                   <strong>{story.error.name}:</strong> {story.error.message}
@@ -60,7 +60,7 @@ export default function Stories() {
               })}
             </StoryMainContainer>
           ) : (
-            <VerticalScroll style={{gridArea: 'body'}}>
+            <VerticalScroll>
               <strong>The file you selected does not export a story.</strong>
             </VerticalScroll>
           )}
@@ -98,6 +98,10 @@ const HeaderContainer = styled('header')`
 const VerticalScroll = styled('main')`
   overflow-x: visible;
   overflow-y: auto;
+
+  grid-row: 1;
+  grid-column: 2;
+  padding: ${space(2)};
 `;
 
 const StoryMainContainer = styled('div')`