rename to filtered device list

res/css/_components.pcss

@@ -28,7 +28,7 @@
 @import "./components/views/messages/_MBeaconBody.pcss";
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
 @import "./components/views/settings/devices/_DeviceTile.pcss";
-@import "./components/views/settings/devices/_SortedDeviceList.pcss";
+@import "./components/views/settings/devices/_FilteredDeviceList.pcss";
 @import "./components/views/settings/shared/_SettingsSubsection.pcss";
 @import "./components/views/spaces/_QuickThemeSwitcher.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";

res/css/components/views/settings/devices/_DeviceTile.pcss

@@ -18,7 +18,6 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 $spacing-8;
 
     width: 100%;
 }

res/css/components/views/settings/devices/_SortedDeviceList.pcss → res/css/components/views/settings/devices/_FilteredDeviceList.pcss

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SortedDeviceList {
+.mx_FilteredDeviceList {
     list-style-type: none;
     display: grid;
     grid-gap: $spacing-16;
     margin: 0;
-    padding: 0;
+    padding: 0 $spacing-8;
 }

src/components/views/settings/devices/SortedDeviceList.tsx → src/components/views/settings/devices/FilteredDeviceList.tsx

@@ -33,14 +33,14 @@ const sortDevicesByLatestActivity = (left: DeviceWithVerification, right: Device
 const getSortedDeviceIds = (devices: DevicesDictionary) =>
     Object.values(devices).sort(sortDevicesByLatestActivity).map(device => device.device_id);
 
-const SortedDeviceList: React.FC<Props> = ({ devices }) => {
+const FilteredDeviceList: React.FC<Props> = ({ devices }) => {
     const [sortedIds, setSortedIds] = useState([]);
 
     useEffect(() => {
         setSortedIds(getSortedDeviceIds(devices));
     }, [devices]);
 
-    return <ol className='mx_SortedDeviceList'>
+    return <ol className='mx_FilteredDeviceList'>
         { sortedIds.map((deviceId) =>
         <li key={deviceId}>
 
@@ -54,4 +54,4 @@ const SortedDeviceList: React.FC<Props> = ({ devices }) => {
     </ol>;
 };
 
-export default SortedDeviceList;
+export default FilteredDeviceList;

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -22,7 +22,7 @@ import { useOwnDevices } from '../../devices/useOwnDevices';
 import DeviceTile from '../../devices/DeviceTile';
 import SettingsSubsection from '../../shared/SettingsSubsection';
 import SettingsTab from '../SettingsTab';
-import SortedDeviceList, { DeviceSortOrder } from '../../devices/SortedDeviceList';
+import FilteredDeviceList, { DeviceSortOrder } from '../../devices/FilteredDeviceList';
 
 const SessionManagerTab: React.FC = () => {
     const { devices, currentDeviceId, isLoading } = useOwnDevices();
@@ -49,7 +49,7 @@ const SessionManagerTab: React.FC = () => {
                     `from any session that you don't recognize or use anymore.`
                 )}
             >
-                <SortedDeviceList devices={devices} sortOrder={DeviceSortOrder.LatestActivity} />
+                <FilteredDeviceList devices={devices} sortOrder={DeviceSortOrder.LatestActivity} />
             </SettingsSubsection>
         }
     </SettingsTab>;

test/components/views/settings/devices/FilteredDeviceList-test.tsx

@@ -0,0 +1,31 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import FilteredDeviceList from '../../../../../src/components/views/settings/devices/FilteredDeviceList';
+
+describe('<FilteredDeviceList />', () => {
+    const defaultProps = {};
+    const getComponent = (props = {}) =>
+        mount(<FilteredDeviceList {...defaultProps} {...props} />);
+
+    it('renders', () => {
+        const component = getComponent();
+        expect(component).toBeTruthy();
+    });
+});