Change sidebar splitter CSS to only apply to the sidebar, not to all splitters under .DetailsContainer (#6114)

For the function list, we'll want to split the "main content" of the
panel into the list on the left and the "wings" on the right, with a
splitter. But this splitter should look like a normal splitter, not like
the extra thick sidebar splitter. But these sidebar splitter rules were
applying to all splitters under .DetailsContainer; this reduces the
scope to only apply to the actual sidebar splitter.

Author: mstange

src/components/app/DetailsContainer.css

@@ -6,22 +6,23 @@
   contain: size;
 }
 
-.DetailsContainer .resizableWithSplitterInner > * {
-  min-width: 0;
-  flex: 1;
-}
-
 .DetailsContainerResizableSidebarWrapper {
   max-width: 600px;
 }
 
 /* overriding defaults from ResizableWithSplitter.css */
-.DetailsContainer .resizableWithSplitterSplitter {
+.DetailsContainerResizableSidebarWrapper > .resizableWithSplitterSplitter {
   border-top: 1px solid var(--panel-border-color);
   border-left: 1px solid var(--panel-border-color);
   background: var(--panel-background-color); /* Same background as sidebars */
 }
 
-.DetailsContainer .resizableWithSplitterSplitter:hover {
+.DetailsContainerResizableSidebarWrapper
+  > .resizableWithSplitterSplitter:hover {
   background: var(--panel-background-color); /* same as the border above */
 }
+
+.DetailsContainerResizableSidebarWrapper > .resizableWithSplitterInner > * {
+  min-width: 0;
+  flex: 1;
+}