landscape: duplicative wayfinding button, form verbiage

ui/src/components/LandscapeWayfinding.tsx

@@ -118,7 +118,11 @@ function LandscapeDescription() {
   );
 }
 
-export default function LandscapeWayfinding() {
+export default function LandscapeWayfinding({
+  className,
+}: {
+  className?: string;
+}) {
   const [showModal, setShowModal] = useState(false);
 
   const handleHide = () => {
@@ -127,7 +131,7 @@ export default function LandscapeWayfinding() {
 
   return (
     <Dropdown.Root>
-      <div className="sm:fixed sm:left-4 sm:bottom-4 sm:z-[100] sm:!ml-0">
+      <div className={className}>
         <Dropdown.Trigger className="relative" asChild>
           <button className="h-8 w-8 cursor-pointer rounded-lg bg-black text-xl text-white sm:h-9 sm:w-9">
             ?

ui/src/nav/GetApps.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import WayfindingAppLink from '../components/WayfindingAppLink';
 import { useCharges } from '../state/docket';
 import { APPS, SECTIONS } from '../constants';
+import { useMedia } from '../logic/useMedia';
 
 export default function GetApps() {
   const charges = useCharges();
+  const isMobile = useMedia('(max-width: 639px)');
 
   return (
     <div className="flex h-full flex-col space-y-8 overflow-y-scroll p-8">
@@ -14,7 +16,8 @@ export default function GetApps() {
           Find Urbit App Developers
         </h2>
         <span>
-          Use the search field above to find apps or ships hosting apps.
+          Use the search field {isMobile ? 'below' : 'above'} to find apps or
+          ships hosting apps.
         </span>
       </div>
       {Object.entries(SECTIONS).map(([key, name]) => (

ui/src/nav/Nav.tsx

@@ -203,7 +203,7 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
         ) : (
           <GetAppsLink />
         )}
-        {!disableWayfinding && <LandscapeWayfinding />}
+        {!disableWayfinding && <LandscapeWayfinding className="sm:hidden" />}
       </Portal.Root>
 
       <div

ui/src/pages/Grid.tsx

@@ -2,12 +2,13 @@ import React, { FunctionComponent, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Route, useHistory, useParams } from 'react-router-dom';
 import { ErrorAlert } from '../components/ErrorAlert';
+import LandscapeWayfinding from '../components/LandscapeWayfinding';
 import { MenuState, Nav } from '../nav/Nav';
 import useKilnState from '../state/kiln';
+import { useCalm } from '../state/settings';
 import { RemoveApp } from '../tiles/RemoveApp';
 import { SuspendApp } from '../tiles/SuspendApp';
 import { TileGrid } from '../tiles/TileGrid';
-
 import { TileInfo } from '../tiles/TileInfo';
 
 interface RouteProps {
@@ -17,6 +18,7 @@ interface RouteProps {
 export const Grid: FunctionComponent = () => {
   const { push } = useHistory();
   const { menu } = useParams<RouteProps>();
+  const { disableWayfinding } = useCalm();
 
   useEffect(() => {
     // TOOD: rework
@@ -58,6 +60,9 @@ export const Grid: FunctionComponent = () => {
             <RemoveApp />
           </Route>
         </ErrorBoundary>
+        {!disableWayfinding && (
+          <LandscapeWayfinding className="hidden sm:fixed sm:bottom-4 sm:left-4 sm:z-[100] sm:block" />
+        )}
       </main>
     </div>
   );