Fix cell toolbar on mobile

Author: jtpio

packages/notebook-extension/style/base.css

@@ -72,18 +72,29 @@ body[data-notebook='notebooks']
 
 body[data-notebook='notebooks'] .jp-cell-toolbar {
   background: unset;
-  top: unset;
   box-shadow: unset;
 }
 
+body[data-notebook='notebooks']
+  .jp-RawCell[data-windowed-list-index='0']
+  .jp-cell-toolbar,
+body[data-notebook='notebooks']
+  .jp-MarkdownCell[data-windowed-list-index='0']
+  .jp-cell-toolbar {
+  top: calc(2 * var(--jp-notebook-padding));
+}
+
 @media only screen and (max-width: 760px) {
-  body[data-notebook='notebooks'] .jp-CodeCell .jp-cell-toolbar {
-    top: 20px;
+  /* first code cell on mobile */
+  body[data-notebook='notebooks']
+    .jp-CodeCell[data-windowed-list-index='0']
+    .jp-cell-toolbar {
+    top: var(--jp-notebook-padding);
   }
 
   body[data-notebook='notebooks'] .jp-MarkdownCell .jp-cell-toolbar,
   body[data-notebook='notebooks'] .jp-RawCell .jp-cell-toolbar {
-    top: 5px;
+    top: calc(0.5 * var(--jp-notebook-padding));
   }
 }