QuickOpen File Search rows can be quite tall (#5729)

* Moved path to the same line of filename, added truncation

* Removed unnecessary 'max-width'

It's fit better without 'max-width'

* More space bewtween filename and path

* Removed filename from URL

* Forgot yarn lint

* Removed first and last slash

* Prevent line wrapping for long paths

* Remove querystring from result list

Author: marcogallo566

src/components/QuickOpenModal.js

@@ -342,16 +342,7 @@ export class QuickOpenModal extends Component<Props, State> {
     return results.map(result => {
       return {
         ...result,
-        title: this.renderHighlight(result.title, basename(newQuery), "title"),
-        ...(result.subtitle != null && !this.isSymbolSearch()
-          ? {
-              subtitle: this.renderHighlight(
-                result.subtitle,
-                newQuery,
-                "subtitle"
-              )
-            }
-          : null)
+        title: this.renderHighlight(result.title, basename(newQuery), "title")
       };
     });
   };

src/components/shared/ResultList.css

@@ -20,12 +20,11 @@
   color: var(--theme-body-color);
   padding: 4px 13px;
   display: flex;
-  justify-content: space-between;
 }
 
 .result-list.big li {
   padding: 10px;
-  flex-direction: column;
+  flex-direction: row;
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
@@ -57,6 +56,9 @@
 .result-list li .title {
   line-height: 1.5em;
   word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .result-list li.selected .title {
@@ -80,6 +82,10 @@
 .result-list.big li .subtitle {
   word-break: break-all;
   color: var(--theme-body-color-inactive);
+  margin-left: 15px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .result-list.big li .subtitle {

src/utils/quick-open.js

@@ -114,8 +114,13 @@ export function formatSources(sources: SourcesMap): Array<QuickOpenResult> {
       const sourcePath = getSourcePath(source.get("url"));
       return {
         value: sourcePath,
-        title: sourcePath.split("/").pop(),
-        subtitle: endTruncateStr(sourcePath, 100),
+        title: sourcePath
+          .split("/")
+          .pop()
+          .split("?")[0],
+        subtitle: endTruncateStr(sourcePath, 100)
+          .replace(sourcePath.split("/").pop(), "")
+          .slice(1, -1),
         id: source.get("id"),
         url: source.get("url")
       };