Move the scope selector to the bottom of the data picker. (#5863)

## Before

![image](https://github.com/concrete-utopia/utopia/assets/16385508/9494b1ef-8685-4d52-8fb5-95f056475d13)

## After
<img width="866" alt="image"
src="https://github.com/concrete-utopia/utopia/assets/16385508/a4341527-8ee5-440d-96c0-fb60816f75d3">

Ignore the wide cartouches, fix coming on a separate PR

### Manual Tests
I hereby swear that:

- [ ] I opened a hydrogen project and it loaded
- [ ] I could navigate to various routes in Preview mode

editor/src/components/inspector/sections/component-section/data-selector-modal.tsx

@@ -411,32 +411,6 @@ export const DataSelectorModal = React.memo(
                 ...style,
               }}
             >
-              {/* Scope Selector Breadcrumbs */}
-              <FlexRow style={{ gap: 2, paddingBottom: 8 }}>
-                {elementLabelsWithScopes.map(({ label, scope, hasContent }, idx, a) => (
-                  <React.Fragment key={`label-${idx}`}>
-                    <div
-                      onClick={setSelectedScopeCurried(scope, hasContent)}
-                      style={{
-                        width: 'max-content',
-                        padding: '2px 4px',
-                        borderRadius: 4,
-                        cursor: hasContent ? 'pointer' : undefined,
-                        color: hasContent
-                          ? colorTheme.neutralForeground.value
-                          : colorTheme.subduedForeground.value,
-                        fontSize: 12,
-                        fontWeight: insertionCeilingsEqual(selectedScope, scope) ? 800 : undefined,
-                      }}
-                    >
-                      {label}
-                    </div>
-                    {idx < a.length - 1 ? (
-                      <span style={{ width: 'max-content', padding: '2px 4px' }}>{'/'}</span>
-                    ) : null}
-                  </React.Fragment>
-                ))}
-              </FlexRow>
               {/* top bar */}
               <FlexRow style={{ justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                 <FlexRow style={{ gap: 8, flexWrap: 'wrap', flexGrow: 1 }}>
@@ -630,6 +604,32 @@ export const DataSelectorModal = React.memo(
                   </div>,
                 )}
               </div>
+              {/* Scope Selector Breadcrumbs */}
+              <FlexRow style={{ gap: 2, paddingTop: 16, paddingBottom: 16, opacity: 0.5 }}>
+                {elementLabelsWithScopes.map(({ label, scope, hasContent }, idx, a) => (
+                  <React.Fragment key={`label-${idx}`}>
+                    <div
+                      onClick={setSelectedScopeCurried(scope, hasContent)}
+                      style={{
+                        width: 'max-content',
+                        padding: '2px 4px',
+                        borderRadius: 4,
+                        cursor: hasContent ? 'pointer' : undefined,
+                        color: hasContent
+                          ? colorTheme.neutralForeground.value
+                          : colorTheme.subduedForeground.value,
+                        fontSize: 12,
+                        fontWeight: insertionCeilingsEqual(selectedScope, scope) ? 800 : undefined,
+                      }}
+                    >
+                      {label}
+                    </div>
+                    {idx < a.length - 1 ? (
+                      <span style={{ width: 'max-content', padding: '2px 4px' }}>{'/'}</span>
+                    ) : null}
+                  </React.Fragment>
+                ))}
+              </FlexRow>
             </FlexColumn>
           </div>
         </InspectorModal>