Make debug UI search bar more compact, avoid overflow

client/src/components/ItineraryList/ItineraryPaginationControl.tsx

@@ -14,6 +14,8 @@ export function ItineraryPaginationControl({
   return (
     <div style={{ display: 'flex', justifyContent: 'space-evenly', margin: '1rem 0 ' }}>
       <Button
+        variant="outline-primary"
+        size="sm"
         disabled={!previousPageCursor || loading}
         onClick={() => {
           previousPageCursor && onPagination(previousPageCursor);
@@ -22,6 +24,8 @@ export function ItineraryPaginationControl({
         Previous page
       </Button>{' '}
       <Button
+        variant="outline-primary"
+        size="sm"
         disabled={!nextPageCursor || loading}
         onClick={() => {
           nextPageCursor && onPagination(nextPageCursor);

client/src/components/SearchBar/GraphiQLRouteButton.tsx

@@ -1,18 +1,25 @@
 import { Button } from 'react-bootstrap';
 import { TripQueryVariables } from '../../gql/graphql.ts';
 import { queryAsString } from '../../static/query/tripQuery.tsx';
+import graphqlIcon from '../../static/img/graphql-solid.svg';
+
 const graphiQLUrl = import.meta.env.VITE_GRAPHIQL_URL;
 
 function GraphiQLRouteButton({ tripQueryVariables }: { tripQueryVariables: TripQueryVariables }) {
   const formattedVariables = encodeURIComponent(JSON.stringify(tripQueryVariables));
   const formattedQuery = encodeURIComponent(queryAsString);
 
+  const hint = 'Open in GraphiQL';
+
   return (
-    <div className="search-bar-route-button-wrapper">
-      <Button href={graphiQLUrl + '&query=' + formattedQuery + '&variables=' + formattedVariables} target={'_blank'}>
-        GraphiQL
-      </Button>
-    </div>
+    <Button
+      title={hint}
+      href={graphiQLUrl + '&query=' + formattedQuery + '&variables=' + formattedVariables}
+      target={'_blank'}
+    >
+      <img alt={hint} title={hint} src={graphqlIcon} width="20" height="20" className="d-inline-block align-middle" />
+    </Button>
   );
 }
+
 export default GraphiQLRouteButton;

client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx

@@ -11,11 +11,12 @@ export function ItineraryFilterDebugSelect({
   return (
     <Form.Group>
       <Form.Label column="sm" htmlFor="itineraryDebugFilterSelect">
-        Itinerary filter debug
+        Filter debug
       </Form.Label>
       <Form.Select
         id="itineraryDebugFilterSelect"
         size="sm"
+        className="input-medium"
         onChange={(e) => {
           setTripQueryVariables({
             ...tripQueryVariables,

client/src/components/SearchBar/LocationInputField.tsx

@@ -13,6 +13,7 @@ export function LocationInputField({ location, id, label }: { location: Location
         id={id}
         size="sm"
         placeholder="[Click in map]"
+        className="input-medium"
         // Intentionally empty for now, but needed because of
         // https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable
         onChange={() => {}}

client/src/components/SearchBar/NumTripPatternsInput.tsx

@@ -11,14 +11,15 @@ export function NumTripPatternsInput({
   return (
     <Form.Group>
       <Form.Label column="sm" htmlFor="numTripPatternsInput">
-        Number of trip patterns
+        Num. results
       </Form.Label>
       <Form.Control
         type="number"
         id="numTripPatternsInput"
         size="sm"
         placeholder="12"
         min={1}
+        className="input-small"
         value={tripQueryVariables.numTripPatterns || ''}
         onChange={(event) =>
           setTripQueryVariables({

client/src/components/SearchBar/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { Button, Spinner } from 'react-bootstrap';
+import { Button, ButtonGroup, Spinner } from 'react-bootstrap';
 import { ServerInfo, TripQueryVariables } from '../../gql/graphql.ts';
 import { LocationInputField } from './LocationInputField.tsx';
 import { DepartureArrivalSelect } from './DepartureArrivalSelect.tsx';
@@ -57,16 +57,18 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables,
       />
 
       <div className="search-bar-route-button-wrapper">
-        <Button variant="primary" onClick={() => onRoute()} disabled={loading}>
-          {loading && (
-            <>
-              <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" />{' '}
-            </>
-          )}
-          Route
-        </Button>
+        <ButtonGroup>
+          <Button variant="primary" onClick={() => onRoute()} disabled={loading}>
+            {loading && (
+              <>
+                <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" />{' '}
+              </>
+            )}
+            Route
+          </Button>
+          <GraphiQLRouteButton tripQueryVariables={tripQueryVariables}></GraphiQLRouteButton>
+        </ButtonGroup>
       </div>
-      <GraphiQLRouteButton tripQueryVariables={tripQueryVariables}></GraphiQLRouteButton>
     </div>
   );
 }

client/src/components/SearchBar/SearchWindowInput.tsx

@@ -19,6 +19,7 @@ export function SearchWindowInput({
         size="sm"
         placeholder="(in minutes)"
         min={1}
+        className="input-small"
         value={tripQueryVariables.searchWindow || ''}
         onChange={(event) =>
           setTripQueryVariables({

client/src/style.css

@@ -7,7 +7,7 @@
   margin-right: 14px;
 }
 
-@media (min-width: 2160px) {
+@media (min-width: 1895px) {
   .top-content {
     height: 75px;
   }
@@ -17,7 +17,7 @@
   }
 }
 
-@media (max-width: 2159px) {
+@media (max-width: 1896px) {
   .top-content {
     height: 150px;
   }
@@ -50,11 +50,23 @@
   margin-right: 1rem;
 }
 
+.search-bar input.input-small {
+  max-width: 100px;
+}
+
+.search-bar input.input-medium {
+  max-width: 130px;
+}
+
 .search-bar-route-button-wrapper {
   height: 5rem;
   padding-top: 25px;
 }
 
+.search-bar-route-button-wrapper a.btn img {
+  margin-top: -2px;
+}
+
 .itinerary-list-container {
   width: 36rem;
   overflow-y: auto;