Saved question picker fixes (#16904)

* adjust saved question picker layout

* fix saved question picker does not work with collection names that have a colon

* unskip repro

* make saved question picker usable on the mobile device

frontend/src/metabase/query_builder/components/DataSelector.jsx

@@ -764,6 +764,7 @@ export class UnconnectedDataSelector extends Component {
     return (
       <PopoverWithTrigger
         id="DataPopover"
+        autoWidth
         ref={this.popover}
         isInitiallyOpen={this.props.isInitiallyOpen}
         triggerElement={this.getTriggerElement()}

frontend/src/metabase/query_builder/components/saved-question-picker/SavedQuestionList.styled.jsx

 import styled from "styled-components";
 import { SelectList } from "metabase/components/select-list";
+import { breakpointMaxSmall } from "metabase/styled-components/theme/media-queries";
 
 export const SavedQuestionListRoot = styled(SelectList)`
   overflow: auto;
   width: 100%;
   padding: 0.5rem;
+
+  ${breakpointMaxSmall} {
+    min-height: 220px;
+  }
 `;

frontend/src/metabase/query_builder/components/saved-question-picker/SavedQuestionPicker.styled.jsx

 import styled from "styled-components";
 import { color } from "metabase/lib/colors";
+import { breakpointMaxSmall } from "metabase/styled-components/theme/media-queries";
 
 export const SavedQuestionPickerRoot = styled.div`
   display: flex;
-  width: 480px;
+  width: 620px;
   overflow: hidden;
+  border-top: 1px solid ${color("border")};
+
+  ${breakpointMaxSmall} {
+    flex-direction: column;
+    width: 300px;
+    overflow: auto;
+  }
 `;
 
 export const CollectionsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  min-width: 230px;
+  min-width: 310px;
   background-color: ${color("bg-light")};
   overflow: auto;
+
+  ${breakpointMaxSmall} {
+    min-height: 220px;
+    border-bottom: 1px solid ${color("border")};
+  }
 `;
 
 export const BackButton = styled.a`

frontend/src/metabase/schema.js

@@ -100,8 +100,15 @@ CollectionSchema.define({
   items: [ObjectUnionSchema],
 });
 
-export const parseSchemaId = id => String(id || "").split(":");
 export const getSchemaName = id => parseSchemaId(id)[1];
+export const parseSchemaId = id => {
+  const schemaId = String(id || "");
+  const firstColonIndex = schemaId.indexOf(":");
+  const dbId = schemaId.substring(0, firstColonIndex);
+  const schemaName = schemaId.substring(firstColonIndex + 1);
+
+  return [dbId, schemaName];
+};
 export const generateSchemaId = (dbId, schemaName) =>
   `${dbId}:${schemaName || ""}`;
 

frontend/test/metabase/scenarios/collections/collections.cy.spec.js

@@ -429,7 +429,7 @@ describe("scenarios > collection_defaults", () => {
         });
     });
 
-    it.skip("should suggest questions saved in collections with colon in their name (metabase#14287)", () => {
+    it("should suggest questions saved in collections with colon in their name (metabase#14287)", () => {
       cy.request("POST", "/api/collection", {
         name: "foo:bar",
         color: "#509EE3",