frontend/fix mobile

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - You can now link directly to instances at e.g. /instance/mastodon.social.
 - Instance details now have a link to the corresponding fediverse.network page.
 - The reset-graph-view button now explains what it's for when you hover over it.
+- The main graph is no longer displayed on mobile. Instead, a smaller neighborhood graph is shown.
 
 ### Changed
 

frontend/src/components/molecules/Cytoscape.tsx

@@ -8,6 +8,7 @@ import { DEFAULT_NODE_COLOR, SELECTED_NODE_COLOR } from "../../constants";
 const CytoscapeContainer = styled.div`
   width: 100%;
   height: 100%;
+  flex: 1;
 `;
 
 interface ICytoscapeProps {

frontend/src/components/organisms/SidebarContainer.tsx

@@ -6,12 +6,14 @@ const RightDiv = styled.div`
   align-self: right;
   background-color: grey;
   flex: 1;
-  overflow: scroll;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
   overflow-x: hidden;
 `;
 const StyledCard = styled(Card)`
   min-height: 100%;
   width: 100%;
+  padding: 20px 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;

frontend/src/components/screens/InstanceScreen.tsx

@@ -43,6 +43,7 @@ const HeadingContainer = styled.div`
   flex-direction: row;
   align-items: center;
   width: 100%;
+  padding: 0 20px;
 `;
 const StyledHeadingH2 = styled(H2)`
   margin: 0;
@@ -61,11 +62,18 @@ const StyledLinkToFdNetwork = styled.div`
   text-align: center;
   margin-top: auto;
 `;
+const StyledCallout = styled(Callout)`
+  margin: 10px 20px;
+  width: auto;
+`;
 const StyledTabs = styled(Tabs)`
   width: 100%;
+  padding: 0 20px;
 `;
 const StyledGraphContainer = styled.div`
-  height: 50%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
   margin-bottom: 10px;
 `;
 interface IInstanceScreenProps {
@@ -177,11 +185,13 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
   private renderTabs = () => {
     const hasNeighbors = this.state.neighbors && this.state.neighbors.length > 0;
 
+    const hasLocalGraph =
+      !!this.state.localGraph && this.state.localGraph.nodes.length > 0 && this.state.localGraph.edges.length > 0;
     const insularCallout =
-      this.props.graph && !this.state.isProcessingNeighbors && !hasNeighbors && !this.state.localGraph ? (
+      this.props.graph && !this.state.isProcessingNeighbors && !hasNeighbors && !hasLocalGraph ? (
-        <Callout icon={IconNames.INFO_SIGN} title="Insular instance">
+        <StyledCallout icon={IconNames.INFO_SIGN} title="Insular instance">
           <p>This instance doesn't have any neighbors that we know of, so it's hidden from the graph.</p>
-        </Callout>
+        </StyledCallout>
       ) : (
         undefined
       );
@@ -211,13 +221,16 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
   };
 
   private maybeRenderLocalGraph = () => {
-    if (!this.state.localGraph) {
+    const { localGraph } = this.state;
+    const hasLocalGraph =
+      !!this.state.localGraph && this.state.localGraph.nodes.length > 0 && this.state.localGraph.edges.length > 0;
+    if (!hasLocalGraph) {
       return;
     }
     return (
       <StyledGraphContainer>
         <Cytoscape
-          elements={this.state.localGraph}
+          elements={localGraph!}
           currentNodeId={this.props.instanceName}
           navigateToInstancePath={this.props.navigateToInstance}
         />

frontend/src/redux/actions.ts

@@ -91,6 +91,8 @@ export const loadInstance = (instanceName: string | null) => {
 
 export const updateSearch = (query: string) => {
   return (dispatch: Dispatch, getState: () => IAppState) => {
+    query = query.trim();
+
     if (!query) {
       dispatch(resetSearch());
       return;