responsive screens

getsentry · Sep 26, 2024 · f3829a8 · f3829a8
1 parent 02d4ce3
commit f3829a8
Showing 1 changed file with 25 additions and 38 deletions.
diff --git a/static/app/views/explore/content.tsx b/static/app/views/explore/content.tsx
@@ -65,35 +65,31 @@ function ExploreContentImpl({}: ExploreContentProps) {
         <Layout.Page>
           <Layout.Header>
             <Layout.HeaderContent>
-              <Title>{t('Explore')}</Title>
+              <Layout.Title>{t('Explore')}</Layout.Title>
             </Layout.HeaderContent>
             <Layout.HeaderActions>
               <ButtonBar gap={1}>
                 <Button onClick={switchToOldTraceExplorer}>
-                  {t('Switch to old Trace Explore')}
+                  {t('Switch to Old Trace Explore')}
                 </Button>
                 <FeedbackWidgetButton />
               </ButtonBar>
             </Layout.HeaderActions>
           </Layout.Header>
           <Body>
-            <FilterActions>
-              <PageFilterBar condensed>
-                <ProjectPageFilter />
-                <EnvironmentPageFilter />
-                <DatePageFilter />
-              </PageFilterBar>
-              <SpanSearchQueryBuilder
-                supportedAggregates={supportedAggregates}
-                projects={selection.projects}
-                initialQuery={userQuery}
-                onSearch={setUserQuery}
-                searchSource="explore"
-              />
-            </FilterActions>
-            <Side>
-              <ExploreToolbar extras={toolbarExtras} />
-            </Side>
+            <PageFilterBar condensed>
+              <ProjectPageFilter />
+              <EnvironmentPageFilter />
+              <DatePageFilter />
+            </PageFilterBar>
+            <StyledSpanSearchQueryBuilder
+              supportedAggregates={supportedAggregates}
+              projects={selection.projects}
+              initialQuery={userQuery}
+              onSearch={setUserQuery}
+              searchSource="explore"
+            />
+            <ExploreToolbar extras={toolbarExtras} />
             <Main fullWidth>
               <ExploreCharts query={userQuery} />
               <ExploreTables />
@@ -113,34 +109,25 @@ export function ExploreContent(props: ExploreContentProps) {
   );
 }
 
-const Title = styled(Layout.Title)`
-  margin-bottom: ${space(2)};
-`;
-
-const FilterActions = styled('div')`
-  grid-column: 1 / -1;
-  display: grid;
+const Body = styled(Layout.Body)`
+  display: flex;
+  flex-direction: column;
   gap: ${space(2)};
-  grid-template-columns: auto;
 
-  @media (min-width: ${p => p.theme.breakpoints.large}) {
-    grid-template-columns: auto 1fr;
+  @media (min-width: ${p => p.theme.breakpoints.medium}) {
+    display: grid;
+    grid-template-columns: 250px minmax(100px, auto);
   }
-`;
 
-const Body = styled(Layout.Body)`
   @media (min-width: ${p => p.theme.breakpoints.large}) {
-    display: grid;
-    grid-template-columns: 280px minmax(100px, auto);
-    align-content: start;
-    gap: ${p => (!p.noRowGap ? `${space(2)}` : `0 ${space(2)}`)};
+    grid-template-columns: 300px minmax(100px, auto);
   }
 `;
 
-const Main = styled(Layout.Main)`
+const StyledSpanSearchQueryBuilder = styled(SpanSearchQueryBuilder)`
   grid-column: 2/3;
 `;
 
-const Side = styled(Layout.Side)`
-  grid-column: 1/2;
+const Main = styled(Layout.Main)`
+  grid-column: 2/3;
 `;