(ui): minor css improvements

react-ui/src/components/devices/view/device.scss

@@ -57,5 +57,6 @@
     &.active {
         color: map-get($theme-colors, primary);
         font-weight: 500;
+        text-decoration: underline;
     }
 }

react-ui/src/components/devices/view/device.view.table.tsx

@@ -48,7 +48,6 @@ export const DeviceViewTable = (searchRef: MutableRefObject<HTMLInputElement>) =
                         <td data-copy-value={deviceId} dangerouslySetInnerHTML={{ __html: search ? insertMarkTags(cropedId, search) : DOMPurify.sanitize(cropedId) }}></td>
                     </OverlayTrigger>
                     <td data-copy-value={username} dangerouslySetInnerHTML={{ __html: search ? insertMarkTags(username, search) : DOMPurify.sanitize(username) }}></td>
-                    <td></td>
                 </tr>
             )
         })
@@ -61,7 +60,6 @@ export const DeviceViewTable = (searchRef: MutableRefObject<HTMLInputElement>) =
                     <th>{t('device.table.header.name')}</th>
                     <th>{t('device.table.header.uuid')}</th>
                     <th>{t('device.table.header.user')}</th>
-                    <th>{t('device.table.header.last_updated')}</th>
                 </tr>
             </thead>
             <tbody>

react-ui/src/components/devices/view/device.view.tabs.tsx

@@ -24,8 +24,6 @@ export const DeviceViewTabs = (activeTab: DeviceViewTabValues) => {
             <>
                 {jsonYang &&
                     <JsonViewer json={jsonYang} />
-
-                    //<ReactJson src={selectedDevice.json} name={false} collapsed={true} quotesOnKeys={false} />
                 }
             </>
         );

react-ui/src/components/devices/view/device.view.tsx

@@ -15,19 +15,19 @@ const DeviceView = () => {
         <div className='m-4 pt-4'>
             <Container fluid>
                 <Row>
-                    <Col sm={5}>
+                    <Col lg={5} sm={12}>
                         <Container className='bg-white rounded c-box'>
                             <Row>
                                 <Col sm={12} className='mt-4'><h3 className='text-black-50'>{t('device.title')}</h3></Col>
                             </Row>
 
                             <Row className='align-items-center'>
-                                <Col sm={6}>
+                                <Col xs={12} sm={6}>
                                     <Form.Group controlId='device.search' className='p-0 mx-1 pt-2'>
                                         <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
                                     </Form.Group>
                                 </Col>
-                                <Col sm={{ span: 3, offset: 3 }} className='pt-2'>
+                                <Col xs={12} sm={6} className='pt-2'>
                                     <Button variant='primary' className='w-100 my-auto'>{t('device.add_device_button')}</Button>
                                 </Col>
                             </Row>
@@ -39,10 +39,10 @@ const DeviceView = () => {
                             </Row>
                         </Container>
                     </Col>
-                    <Col sm={7}>
+                    <Col xs={12} lg={7} className='mt-5 mt-lg-0'>
                         <Container className='bg-white rounded c-box'>
                             <Row>
-                                <Col sm={12} className='mt-4'>
+                                <Col xs={12} className='mt-4'>
                                     <Nav className='justify-content-around'>
                                         <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
                                         <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
@@ -51,7 +51,7 @@ const DeviceView = () => {
                             </Row>
 
                             <Row className='align-items-start'>
-                                <Col sm={12} className='pt-2'>
+                                <Col xs={12}>
                                     {DeviceViewTabs(activeTab)}
                                 </Col>
                             </Row>

react-ui/vite.config.mjs

 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
-
 export default defineConfig({
     plugins: [react()],
     build: {