diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css
index a9b07fa09..8810c162f 100644
--- a/src/opnsense/www/css/dashboard.css
+++ b/src/opnsense/www/css/dashboard.css
@@ -53,7 +53,6 @@
border-color: rgba(217, 79, 0, 0.15);
border-width: 2px;
background-color: #fbfbfb;
- border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.widget-error {
@@ -337,6 +336,8 @@ div {
}
.grid-item {
+ overflow: hidden;
+ text-overflow: ellipsis;
border: 1 px solid #ccc;
padding: 4px;
text-align: center;
diff --git a/src/opnsense/www/js/widgets/Firewall.js b/src/opnsense/www/js/widgets/Firewall.js
index b645b54c9..f16a53b9a 100644
--- a/src/opnsense/www/js/widgets/Firewall.js
+++ b/src/opnsense/www/js/widgets/Firewall.js
@@ -82,6 +82,8 @@ export default class Firewall extends BaseTableWidget {
super.closeEventSource();
}
+ $('.ip-tooltip').tooltip('hide');
+
let actIcons = {
'pass': '',
'block': '',
@@ -123,12 +125,14 @@ export default class Firewall extends BaseTableWidget {
/* Format time based on client browser locale */
(new Intl.DateTimeFormat(undefined, {hour: 'numeric', minute: 'numeric'})).format(new Date(data.__timestamp__)),
this.ifMap[data.interface] ?? data.interface,
- data.src,
- data.dst,
+ `${data.src}`,
+ `${data.dst}`,
data.dstport ?? ''
]
]);
+ $('.ip-tooltip').tooltip({container: 'body'});
+
super.updateTable('fw-rule-table', [
[
popover.html($(`
${this.counters[data.rid].label}
`)).prop('outerHTML'),
diff --git a/src/opnsense/www/js/widgets/InterfaceStatistics.js b/src/opnsense/www/js/widgets/InterfaceStatistics.js
index f2262ee3d..7ae874d30 100644
--- a/src/opnsense/www/js/widgets/InterfaceStatistics.js
+++ b/src/opnsense/www/js/widgets/InterfaceStatistics.js
@@ -36,6 +36,13 @@ export default class InterfaceStatistics extends BaseTableWidget {
this.sortedData = [];
}
+ getGridOptions() {
+ return {
+ // trigger overflow-y:scroll after 650px height
+ sizeToContent: 650,
+ };
+ }
+
getMarkup() {
let $container = $('');
let $table = this.createTable('interface-statistics-table', {
@@ -82,10 +89,14 @@ export default class InterfaceStatistics extends BaseTableWidget {
async onWidgetTick() {
const data = await this.ajaxCall('/api/diagnostics/traffic/interface');
+ $('.if-tooltip').tooltip('hide');
+
for (const [id, obj] of Object.entries(data.interfaces)) {
super.updateTable('interface-statistics-table', [
[
- $(`${obj.name}`).prop('outerHTML'),
+ `
+ ${obj.name}
+ `,
this._formatBytes(parseInt(obj["bytes received"])) || "0",
this._formatBytes(parseInt(obj["bytes transmitted"])) || "0",
parseInt(obj["packets received"]).toLocaleString(),
@@ -97,6 +108,8 @@ export default class InterfaceStatistics extends BaseTableWidget {
], id);
}
+ $('.if-tooltip').tooltip({container: 'body'});
+
let sortedSet = {};
let i = 0;
let colors = Chart.colorschemes.tableau.Classic10;
diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
index 6768fa60e..a10e71623 100644
--- a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
+++ b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
@@ -55,7 +55,6 @@
border-color: transparentize(map-get($colors, brand-primary), 0.85);
border-width: 2px;
background-color: map-get($colors, page-content-head-background);
- border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.widget-error {
@@ -338,6 +337,8 @@ div {
}
.grid-item {
+ overflow: hidden;
+ text-overflow: ellipsis;
padding: 4px;
text-align: center;
}
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
index d852733db..66dd0d3fc 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
@@ -55,7 +55,6 @@
border-color: transparentize(map-get($colors, brand-primary), 0.85);
border-width: 2px;
background-color: map-get($colors, page-content-head-background);
- border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.widget-error {
@@ -338,6 +337,8 @@ div {
}
.grid-item {
+ overflow: hidden;
+ text-overflow: ellipsis;
padding: 4px;
text-align: center;
}