Merge pull request #2456 from porter-dev/support-registry-only-source

right-align sort selector

dashboard/src/components/RadioFilter.tsx

@@ -10,6 +10,7 @@ type Props = {
   selected: any;
   setSelected: any;
   noMargin?: boolean;
+  dropdownAlignRight?: boolean;
 };
 
 const RadioFilter: React.FC<Props> = (props) => {
@@ -50,7 +51,7 @@ const RadioFilter: React.FC<Props> = (props) => {
     let { options } = props;
     if (expanded) {
       return (
-        <DropdownWrapper>
+        <DropdownWrapper dropdownAlignRight={props.dropdownAlignRight}>
           <Dropdown ref={wrapperRef}>
             {options?.length > 0 ? (
               <ScrollableWrapper>
@@ -205,10 +206,10 @@ const Relative = styled.div`
   position: relative;
 `;
 
-const DropdownWrapper = styled.div`
+const DropdownWrapper = styled.div<{ dropdownAlignRight?: boolean }>`
   position: absolute;
-  width: 100%;
-  right: 0;
+  left: ${props => props.dropdownAlignRight ? "" : "0"};
+  right: ${props => props.dropdownAlignRight ? "0" : ""};
   z-index: 1;
   top: calc(100% + 5px);
 `;

dashboard/src/main/home/cluster-dashboard/SortSelector.tsx

@@ -53,6 +53,7 @@ export default class SortSelector extends Component<PropsType, StateType> {
           options={this.getSortOptions()}
           name="Sort"
           icon={sort}
+          dropdownAlignRight={true}
           noMargin
         />
       </StyledSortSelector>

dashboard/src/main/home/cluster-dashboard/stacks/Dashboard.tsx

@@ -50,15 +50,16 @@ const Dashboard = () => {
           <RadioFilter
             selected={currentSort}
             noMargin
+            dropdownAlignRight={true}
             setSelected={(sortType: any) => setCurrentSort(sortType as any)}
             options={[
               {
                 value: "created_at",
-                label: "Created At",
+                label: "Created at",
               },
               {
                 value: "updated_at",
-                label: "Last Updated",
+                label: "Last updated",
               },
               {
                 value: "alphabetical",