Whenever I open a table or any other element with overflowing content, I encounter an issue with the scrolling bar. Even though the CSS includes overflow-y: scroll;, the scroll bar on the right remains in gray and does not allow me to scroll down when the table expands due to loading 50-100 devices on the test environment. Strangely, this problem does not occur on my production environment where the scroll bar functions as expected. I have not made any recent style changes to the html, body, or table components which could explain this discrepancy. You can see the difference in behavior between the test and prod environments in the following screenshots:
'Test' Environment: https://i.stack.imgur.com/MHVei.png
'Prod' Environment: https://i.stack.imgur.com/M7BjV.png
I attempted to solve the issue by removing the overflow property from the html altogether and setting overflow-y: auto; for the body. However, this caused another problem where the 'LOGOUT' button remained misplaced within the left-side navigation when scrolled to the bottom. While setting a vh height for the table with proper overflow might be a solution, it would require restructuring the pagination layout which is currently pre-built using Vuetify library components. My primary goal is to identify the root cause of this issue since no relevant styling changes have been made recently.
Below is the code snippet:
<template>
<v-card>
<remove-dialog ref="removeDialog" @refresh="fetchDevices"></remove-dialog>
<add-dialog ref="addDialog" @refresh="fetchDevices"></add-dialog>
<v-card-title class="mb-4">
<v-btn color="success" @click="addDevice" outlined small>
<v-icon>mdi-plus</v-icon>
{{ $t('action.addNew') }}
</v-btn>
<v-spacer></v-spacer>
<div>{{ `You have ${devicesLeft} available devices to make ` }}</div>
<v-spacer></v-spacer>
<v-text-field
class="pa-0"
v-model="search"
@change="fetchDevices"
append-icon="mdi-magnify"
:label="$t('label.search')"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="devices"
:options.sync="options"
:server-items-length="totalDevices"
:loading="isLoading"
:footer-props="footerOptions"
:no-results-text="$t('noDataAvailable')"
:no-data-text="$t('noDataAvailable')"
>
<template v-slot:[`item.connectedItems`]="{ item }">
<a @click="goToConnectedItems(item.connectedItems)">{{ item.connectedItems.length }}</a>
</template>
<template v-slot:[`item.lastConnection`]="{ item }">
<span v-if="item.lastConnection">{{ item.lastConnection | moment('from', 'now') }}</span>
<span v-else>n/a</span>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" v-bind="attrs" v-on="on" @click="editDevice(item)" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<span>{{ $t('action.edit') }}</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn color="error" v-bind="attrs" v-on="on" @click="removeDevice(item)" icon>
<v-icon>mdi-delete</v-icon>
</v-btn>
</template>
<span>{{ $t('action.delete') }}</span>
</v-tooltip>
</template>
</v-data-table>
</v-card>
</template>
No specific styles have been applied to this component.