fix layout issue

osm-nz · Oct 15, 2023 · aa9258a · aa9258a
1 parent 2c8a1de
commit aa9258a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 31 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -66,41 +66,45 @@ export const App: React.FC = () => {
         </Modal>
       )}
       <aside>
-        <h3>Missing Streets in New Zealand</h3>
-        {lastUpdated && (
-          <small>
-            Data updated <TimeAgo date={lastUpdated} />
+        <div className="side-by-side">
+          <div>
+            <h3>Missing Streets in New Zealand</h3>
+            {lastUpdated && (
+              <small>
+                Data updated <TimeAgo date={lastUpdated} />
+                <button
+                  className="small"
+                  type="button"
+                  onClick={() => setInfoModalOpen(true)}
+                >
+                  ?
+                </button>
+              </small>
+            )}
+          </div>
+          <div>
             <button
-              className="small"
+              className="nice"
               type="button"
-              onClick={() => setInfoModalOpen(true)}
+              onClick={() => setModalOpen(true)}
             >
-              ?
+              Keyboard Shortcuts
+            </button>{" "}
+            <button
+              className="nice"
+              type="button"
+              onClick={() =>
+                window.open(
+                  "https://wiki.osm.org/New_Zealand/Missing_Streets",
+                  "_blank",
+                  "noopener noreferrer"
+                )
+              }
+            >
+              Documentation
             </button>
-          </small>
-        )}
-        <br />
-        <br />
-        <button
-          className="nice"
-          type="button"
-          onClick={() => setModalOpen(true)}
-        >
-          Keyboard Shortcuts
-        </button>{" "}
-        <button
-          className="nice"
-          type="button"
-          onClick={() =>
-            window.open(
-              "https://wiki.osm.org/New_Zealand/Missing_Streets",
-              "_blank",
-              "noopener noreferrer"
-            )
-          }
-        >
-          Documentation
-        </button>
+          </div>
+        </div>
         <div id="inject" />
         <div id="inject-modal" />
       </aside>

diff --git a/src/index.css b/src/index.css
@@ -13,6 +13,10 @@ aside {
   height: 100px;
   text-align: center;
 }
+.side-by-side {
+  display: flex;
+  justify-content: space-between;
+}
 
 .leaflet-popup-content {
   margin: 25px !important;