fix(ui): Prevent usage stats from overflowing on mobile (#29602)

static/app/views/organizationStats/index.tsx

@@ -303,20 +303,20 @@ export class OrganizationStats extends Component<Props> {
                     handleChangeState={this.setStateOnUrl}
                   />
                 </ErrorBoundary>
-                <ErrorBoundary mini>
-                  <UsageStatsProjects
-                    organization={organization}
-                    dataCategory={this.dataCategory}
-                    dataCategoryName={this.dataCategoryName}
-                    dataDatetime={this.dataDatetime}
-                    tableSort={this.tableSort}
-                    tableQuery={this.tableQuery}
-                    tableCursor={this.tableCursor}
-                    handleChangeState={this.setStateOnUrl}
-                    getNextLocations={this.getNextLocations}
-                  />
-                </ErrorBoundary>
               </PageGrid>
+              <ErrorBoundary mini>
+                <UsageStatsProjects
+                  organization={organization}
+                  dataCategory={this.dataCategory}
+                  dataCategoryName={this.dataCategoryName}
+                  dataDatetime={this.dataDatetime}
+                  tableSort={this.tableSort}
+                  tableQuery={this.tableQuery}
+                  tableCursor={this.tableCursor}
+                  handleChangeState={this.setStateOnUrl}
+                  getNextLocations={this.getNextLocations}
+                />
+              </ErrorBoundary>
             </Layout.Main>
           </Body>
         </Fragment>

static/app/views/organizationStats/usageStatsProjects.tsx

@@ -10,6 +10,7 @@ import Pagination from 'app/components/pagination';
 import SearchBar from 'app/components/searchBar';
 import {DEFAULT_STATS_PERIOD} from 'app/constants';
 import {t} from 'app/locale';
+import space from 'app/styles/space';
 import {DataCategory, Organization, Project} from 'app/types';
 import withProjects from 'app/utils/withProjects';
 
@@ -399,16 +400,16 @@ class UsageStatsProjects extends AsyncComponent<Props, State> {
 
     return (
       <Fragment>
-        <GridRow>
+        <Container>
           <SearchBar
             defaultQuery=""
             query={tableQuery}
             placeholder={t('Filter your projects')}
             onSearch={this.handleSearch}
           />
-        </GridRow>
+        </Container>
 
-        <GridRow>
+        <Container>
           <UsageTable
             isLoading={loading || loadingProjects}
             isError={error}
@@ -419,7 +420,7 @@ class UsageStatsProjects extends AsyncComponent<Props, State> {
             usageStats={tableStats}
           />
           <Pagination pageLinks={this.pageLink} />
-        </GridRow>
+        </Container>
       </Fragment>
     );
   }
@@ -427,6 +428,6 @@ class UsageStatsProjects extends AsyncComponent<Props, State> {
 
 export default withProjects(UsageStatsProjects);
 
-const GridRow = styled('div')`
-  grid-column: 1 / -1;
+const Container = styled('div')`
+  margin-bottom: ${space(2)};
 `;