Repository: cypress-io/cypress
File: packages/runner-ct/src/app/RunnerCt.tsx (TypeScript)

Code before:
            />
          )}
        <SplitPane
          ref={splitPaneRef}
          split="vertical"
          minSize={hideIfScreenshotting(state, () => state.isSpecsListOpen ? 30 : 0)}
          maxSize={hideIfScreenshotting(state, () => state.isSpecsListOpen ? 600 : 0)}
          defaultSize={hideIfScreenshotting(state, () => state.isSpecsListOpen ? state.specListWidth : 0)}
          className={cs('primary', { isSpecsListClosed: !state.isSpecsListOpen })}
          pane2Style={{
            borderLeft: '1px solid rgba(230, 232, 234, 1)' /* $metal-20 */,
          }}
          onDragFinished={persistWidth('ctSpecListWidth')}
          onChange={debounce(updateSpecListWidth)}
        >
          {
            state.specs.length < 1 ? (
              <NoSpec message="No specs found">
                <p className={styles.noSpecsDescription}>
                  Create a new spec file in
                  {' '}
                  <span className={styles.folder}>
                    {
                      props.config.componentFolder
                        ? props.config.componentFolder.replace(props.config.projectRoot, '')
                        : 'component specs folder'
                    }
                  </span>
                  {' '}
                  and it will immediately appear here.
                </p>
              </NoSpec>
            ) : (
              <SpecList
                specs={props.state.specs}
                selectedFile={state.spec ? state.spec.relative : undefined}
                focusSpecList={focusSpecsList}
                searchRef={searchRef}
                className={cs(styles.specsList, {
                  'display-none': hideSpecsListIfNecessary(state),
                })}
                onFileClick={runSpec}
              />
            )
          }

          <SpecContent
            state={props.state}
            eventManager={props.eventManager}
            config={props.config}
          />

Review comment (suggestion):
This results in the text "Create a new spec file in component specs folder". I think we should make it "_the_ component specs folder"

Code after:
            />
          )}
        <SplitPane
          ref={splitPaneRef}
          split="vertical"
          minSize={hideIfScreenshotting(state, () => state.isSpecsListOpen ? 30 : 0)}
          maxSize={hideIfScreenshotting(state, () => state.isSpecsListOpen ? 600 : 0)}
          defaultSize={hideIfScreenshotting(state, () => state.isSpecsListOpen ? state.specListWidth : 0)}
          className={cs('primary', { isSpecsListClosed: !state.isSpecsListOpen })}
          pane2Style={{
            borderLeft: '1px solid rgba(230, 232, 234, 1)' /* $metal-20 */,
          }}
          onDragFinished={persistWidth('ctSpecListWidth')}
          onChange={debounce(updateSpecListWidth)}
        >
          {
            state.specs.length < 1 ? (
              <NoSpec message="No specs found">
                <p className={styles.noSpecsDescription}>
                  Create a new spec file in
                  {' '}
                  <span className={styles.folder}>
                    {
                      props.config.componentFolder
                        ? props.config.componentFolder.replace(props.config.projectRoot, '')
                        : 'the component specs folder'
                    }
                  </span>
                  {' '}
                  and it will immediately appear here.
                </p>
              </NoSpec>
            ) : (
              <SpecList
                specs={props.state.specs}
                selectedFile={state.spec ? state.spec.relative : undefined}
                focusSpecList={focusSpecsList}
                searchRef={searchRef}
                className={cs(styles.specsList, {
                  'display-none': hideSpecsListIfNecessary(state),
                })}
                onFileClick={runSpec}
              />
            )
          }

          <SpecContent
            state={props.state}
            eventManager={props.eventManager}
            config={props.config}
          />