diff --git a/src/app.tsx b/src/app.tsx
index 5c9817e..3e684b7 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -187,13 +187,29 @@ function getArguments(location: H.Location<any>): Arguments {
     ? {id: indi, generation: !isNaN(parsedGen) ? parsedGen : 0}
     : undefined;
 
+  /**
+   * Determines whether the side panel should be shown taking into account the
+   * URL parameter and the viewport size.
+   *
+   * On mobile devices (max-width: 767px), the side panel is hidden by default.
+   * On tablet and desktop, the side panel is shown by default.
+   */
+  function getShowSidePanel() {
+    if (window.matchMedia('(max-width: 767px)').matches) {
+      // On mobile, hide the side panel by default.
+      return getParam('sidePanel') === 'true';
+    }
+    // On tablet and desktop, show the side panel by default.
+    return getParam('sidePanel') !== 'false';
+  }
+
   return {
     sourceSpec,
     selection,
     // Hourglass is the default view.
     chartType: chartTypes.get(view) || ChartType.Hourglass,
 
-    showSidePanel: getParam('sidePanel') !== 'false', // True by default.
+    showSidePanel: getShowSidePanel(),
     standalone: getParam('standalone') !== 'false' && !embedded && !staticUrl,
     showWikiTreeMenus: getParam('showWikiTreeMenus') !== 'false', // True by default.
     freezeAnimation: getParam('freeze') === 'true', // False by default
diff --git a/src/index.css b/src/index.css
index ce21126..04760f1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -336,26 +336,49 @@ div.zoom {
 }
 
 @media (max-width: 767px) {
-  #sidebar.wide {
-    width: 100%;
+  #sidebar {
+    background-color: #fff;
   }
 
+  #sidebar.wide {
+    width: 100%;
+    top: 50%;
+    max-height: 50%;
+  }
+
+  /* Position the thin sidebar at the bottom. */
   #sidebar.very.thin {
-    width: 35px;
+    right: unset !important;
+    left: unset !important;
+    bottom: 0;
+    width: 100%;
+    height: 42px !important;
+    top: auto;
+  }
+
+  /* Display the name horizontally. */
+  .collapsed-details .vertical-name {
+    writing-mode: unset;
+    transform: none;
+  }
+
+  /* Substitute the right arrow with a down arrow. */
+  #sidebar.wide i.icon.arrow.right:before {
+    content: "\f063";
+  }
+
+  /* Substitute the left arrow with an up arrow. */
+  #sidebar.very.thin i.icon.arrow.left:before {
+    content: "\f062";
   }
 
   #content #sidebar.wide ~ .pusher {
-    width: 0;
+    width: 100%;
+    height: 50%;
+    min-height: unset;
   }
 
   #content #sidebar.very.thin ~ .pusher {
-    width: calc(100% - 35px);
+    width: 100%;
   }
-
-  #sidebar.very.thin #sideToggle {
-    width: 35px;
-  }
-}
-
-
-
+}
\ No newline at end of file