..F....... [ZBX-20908] fixed interface type labels in host edit form

* commit 'f5d9f3f7f582f547d0e703a35c91ec88e5b02ff6':
  ..F....... [ZBX-20908] fixed interface type labels in host edit form

12 files changed, 340 insertions, 261 deletions

diff --git a/ChangeLog.d/bugfix/ZBX-20908 b/ChangeLog.d/bugfix/ZBX-20908
new file mode 100644
index 00000000000..107f02b1fe9
--- /dev/null
+++ b/ChangeLog.d/bugfix/ZBX-20908
@@ -0,0 +1 @@
+..F....... [ZBX-20908] fixed interface type labels in host edit form (ashubin)
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index 8fa6dda1fed..1fe9ce57236 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -1562,3 +1562,21 @@ td.inactive-bg {
 		content: "";
 	}
 }
+
+// HOST INTERFACES
+
+.interfaces {
+	.interface-row {
+		&[data-type="2"] {
+			.interface-btn-toggle {
+				background-position: -318px -690px;
+			}
+
+			&.list-accordion-item-opened {
+				.interface-btn-toggle {
+					background-position: -318px -655px;
+				}
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index fbfeb61a82d..4f582a93d8d 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -1389,3 +1389,21 @@ td.inactive-bg {
 		content: "";
 	}
 }
+
+// HOST INTERFACES
+
+.interfaces {
+	.interface-row {
+		&[data-type="2"] {
+			.interface-btn-toggle {
+				background-position: -165px -690px;
+			}
+
+			&.list-accordion-item-opened {
+				.interface-btn-toggle {
+					background-position: -165px -655px;
+				}
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 9b7fac6c11e..f0cb3d715da 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -6184,85 +6184,88 @@ $range-input-width: 31px;
 
 // HOST INTERFACES
 
-.interface-container {
-	width: fit-content;
-	width: -moz-fit-content;
-	padding-left: 0;
-
-	&:not(.interface-container-header):not(:empty) {
-		margin-bottom: 5px;
-
-		& ~ .interface-container:not(:empty) {
-			border-top: 1px solid $form-border-color;
-			padding-top: 10px;
-		}
+.table-forms-td-right {
+	.interfaces {
+		margin-top: 5px;
 	}
+}
 
-	&:empty {
-		display: none;
-	}
+.interfaces {
+	display: grid;
+	grid-template-columns: 26px repeat(7, max-content);
+	margin-bottom: 5px;
+	line-height: 24px;
 
-	.interface-row {
-		display: grid;
-		grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr;
-		grid-template-rows: 24px 1fr;
-		gap: 5px;
+	.interface-container {
+		display: contents;
 
-		&:not(:first-of-type) {
-			margin-top: 5px;
+		&.interface-container-header {
+			.interface-cell {
+				padding: 0 5px 0 0;
+				color: $font-alt-color;
+			}
+
+			.interface-cell-action {
+				grid-column: span 2;
+			}
 		}
 
-		&[data-type] .interface-cell-details {
-			display: none;
-			grid-column: 1/-1;
+		&:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) {
+			.interface-cell:not(.interface-cell-details) {
+				padding-top: 10px;
+				margin-top: 5px;
+				border-top: 1px solid $form-border-color;
+			}
 		}
+	}
 
-		.interface-cell {
-			align-self: center;
+	.interface-row {
+		display: contents;
 
+		&[data-type="2"] {
 			.interface-btn-toggle {
-				display: none;
-				@extend .btn-link;
+				@extend %btn-widget-defaults;
+
+				display: inline-block;
+				width: 24px;
+				height: 24px;
+				background: url($sprite-path) no-repeat -6px -690px;
 			}
 
-			&.interface-cell-header {
-				color: $font-alt-color;
-				text-align: left;
+			.list-accordion-item-body {
+				display: none;
+				padding-top: 0;
 			}
 
-			.table-forms-td-left,
-			.table-forms-td-right {
-				padding-bottom: 0;
+			&.list-accordion-item-opened {
+				.interface-btn-toggle {
+					background: url($sprite-path) no-repeat -6px -655px;
+				}
+
+				.list-accordion-item-body {
+					display: block;
+				}
 			}
 		}
 	}
-}
 
-// Host interface accordion for SNMP specific styles.
-.interface-row.list-accordion-item[data-type="2"] {
-	&.list-accordion-item-closed {
-		.interface-btn-toggle {
-			@extend .btn-widget-expand;
-		}
+	.interface-cell {
+		padding: 5px 5px 5px 0;
 
-		.list-accordion-item-body {
+		&.interface-cell-details {
 			display: none;
+			grid-column: 1 / -1;
 		}
 	}
 
-	&.list-accordion-item-opened {
-		.interface-btn-toggle {
-			@extend .btn-widget-collapse;
-		}
-
-		.list-accordion-item-body {
-			display: block;
-		}
+	.interface-btn-toggle {
+		display: none;
+		vertical-align: top;
 	}
 
-	.interface-btn-toggle {
-		display: inline-block;
-		@extend %btn-widget;
+	.no-interface {
+		grid-column: 1 / -1;
+		color: $font-alt-color;
 	}
 }
 
diff --git a/ui/app/partials/configuration.host.edit.html.php b/ui/app/partials/configuration.host.edit.html.php
index 43622b486c2..735960f80bb 100644
--- a/ui/app/partials/configuration.host.edit.html.php
+++ b/ui/app/partials/configuration.host.edit.html.php
@@ -251,7 +251,13 @@ $host_tab
 	->addItem([
 		new CLabel(_('Interfaces')),
 		new CFormField([
-			new CDiv([renderInterfaceHeaders(), $agent_interfaces, $snmp_interfaces, $jmx_interfaces, $ipmi_interfaces]),
+			(new CDiv([
+				renderInterfaceHeaders(),
+				$agent_interfaces,
+				$snmp_interfaces,
+				$jmx_interfaces,
+				$ipmi_interfaces
+			]))->addClass(ZBX_STYLE_HOST_INTERFACES),
 			$host_is_discovered
 				? null
 				: new CDiv(
diff --git a/ui/assets/styles/blue-theme.css b/ui/assets/styles/blue-theme.css
index e0be871e1b3..82ad95e0dc5 100644
--- a/ui/assets/styles/blue-theme.css
+++ b/ui/assets/styles/blue-theme.css
@@ -3829,7 +3829,7 @@ button {
     background-color: #e8f5ff;
     border-color: #02659f; }
 
-.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle {
+.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
   position: relative;
   background-color: transparent;
   border: 0;
@@ -3839,14 +3839,14 @@ button {
   font-size: inherit;
   padding: 0;
   min-height: inherit; }
-  .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus {
+  .btn-link:focus {
     outline: none;
     margin-bottom: -2px !important;
     border-bottom: 2px solid rgba(2, 117, 184, 0.5);
     box-shadow: 0 0 0 0 !important; }
-  .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle {
+  .btn-link[disabled] {
     background-color: transparent; }
-    .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover {
+    .btn-link[disabled]:hover {
       background-color: transparent; }
 
 .btn-kiosk {
@@ -3891,10 +3891,10 @@ button {
 .btn-widget-action {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; }
 
-.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+.btn-widget-collapse {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; }
 
-.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle {
+.btn-widget-expand {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; }
 
 .btn-widget-edit {
@@ -4174,7 +4174,7 @@ button {
 .btn-dashboard-normal {
   box-shadow: 1px 1px 2px rgba(118, 141, 153, 0.5); }
 
-.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle {
+.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock {
   width: 24px;
   height: 24px;
   margin: 2px 2px 0 0; }
@@ -4183,13 +4183,13 @@ button {
   width: 24px;
   height: 24px; }
 
-.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf {
+.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle {
   border: 0;
   min-height: 0;
   padding: 0;
   opacity: .5;
   transition: opacity .2s ease-out; }
-  .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active {
+  .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active {
     background-color: transparent;
     opacity: .25; }
 
@@ -4217,7 +4217,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
 .inaccessible .subfilter-enabled {
   color: #bfbfbf; }
 
-.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active {
+.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active {
   background-color: transparent;
   opacity: 1; }
 
@@ -5939,7 +5939,7 @@ svg {
   .preprocessing-list select {
     width: 100%;
     min-width: 0; }
-  .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) {
+  .preprocessing-list .btn-link:not(:last-of-type) {
     margin-right: 10px; }
   .preprocessing-list .preprocessing-list-head,
   .preprocessing-list .preprocessing-list-foot,
@@ -6738,44 +6738,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
   /* for IE11 only. Fixed cell height if table has 100% height */
   .host-avail-widget td {
     height: 100%; } }
-.interface-container {
-  width: fit-content;
-  width: -moz-fit-content;
-  padding-left: 0; }
-  .interface-container:not(.interface-container-header):not(:empty) {
-    margin-bottom: 5px; }
-    .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) {
-      border-top: 1px solid #acbbc2;
-      padding-top: 10px; }
-  .interface-container:empty {
-    display: none; }
-  .interface-container .interface-row {
-    display: grid;
-    grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr;
-    grid-template-rows: 24px 1fr;
-    gap: 5px; }
-    .interface-container .interface-row:not(:first-of-type) {
-      margin-top: 5px; }
-    .interface-container .interface-row[data-type] .interface-cell-details {
-      display: none;
-      grid-column: 1/-1; }
-    .interface-container .interface-row .interface-cell {
-      align-self: center; }
-      .interface-container .interface-row .interface-cell .interface-btn-toggle {
-        display: none; }
-      .interface-container .interface-row .interface-cell.interface-cell-header {
-        color: #768d99;
-        text-align: left; }
-      .interface-container .interface-row .interface-cell .table-forms-td-left,
-      .interface-container .interface-row .interface-cell .table-forms-td-right {
-        padding-bottom: 0; }
+.table-forms-td-right .interfaces {
+  margin-top: 5px; }
 
-.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body {
-  display: none; }
-.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body {
-  display: block; }
-.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle {
-  display: inline-block; }
+.interfaces {
+  display: grid;
+  grid-template-columns: 26px repeat(7, max-content);
+  margin-bottom: 5px;
+  line-height: 24px; }
+  .interfaces .interface-container {
+    display: contents; }
+    .interfaces .interface-container.interface-container-header .interface-cell {
+      padding: 0 5px 0 0;
+      color: #768d99; }
+    .interfaces .interface-container.interface-container-header .interface-cell-action {
+      grid-column: span 2; }
+    .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) {
+      padding-top: 10px;
+      margin-top: 5px;
+      border-top: 1px solid #acbbc2; }
+  .interfaces .interface-row {
+    display: contents; }
+    .interfaces .interface-row[data-type="2"] .interface-btn-toggle {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; }
+    .interfaces .interface-row[data-type="2"] .list-accordion-item-body {
+      display: none;
+      padding-top: 0; }
+    .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+      background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; }
+    .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body {
+      display: block; }
+  .interfaces .interface-cell {
+    padding: 5px 5px 5px 0; }
+    .interfaces .interface-cell.interface-cell-details {
+      display: none;
+      grid-column: 1 / -1; }
+  .interfaces .interface-btn-toggle {
+    display: none;
+    vertical-align: top; }
+  .interfaces .no-interface {
+    grid-column: 1 / -1;
+    color: #768d99; }
 
 .debug-modal.overlay-dialogue.modal .overlay-dialogue-body {
   overflow-x: auto; }
diff --git a/ui/assets/styles/dark-theme.css b/ui/assets/styles/dark-theme.css
index a5cfd58a8fa..bd234e3177e 100644
--- a/ui/assets/styles/dark-theme.css
+++ b/ui/assets/styles/dark-theme.css
@@ -3840,7 +3840,7 @@ button {
     background-color: #414141;
     border-color: #768d99; }
 
-.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle {
+.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
   position: relative;
   background-color: transparent;
   border: 0;
@@ -3850,14 +3850,14 @@ button {
   font-size: inherit;
   padding: 0;
   min-height: inherit; }
-  .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus {
+  .btn-link:focus {
     outline: none;
     margin-bottom: -2px !important;
     border-bottom: 2px solid rgba(71, 150, 196, 0.5);
     box-shadow: 0 0 0 0 !important; }
-  .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle {
+  .btn-link[disabled] {
     background-color: transparent; }
-    .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover {
+    .btn-link[disabled]:hover {
       background-color: transparent; }
 
 .btn-kiosk {
@@ -3902,10 +3902,10 @@ button {
 .btn-widget-action {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; }
 
-.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+.btn-widget-collapse {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; }
 
-.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle {
+.btn-widget-expand {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; }
 
 .btn-widget-edit {
@@ -4185,7 +4185,7 @@ button {
 .btn-dashboard-normal {
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
 
-.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle {
+.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock {
   width: 24px;
   height: 24px;
   margin: 2px 2px 0 0; }
@@ -4194,13 +4194,13 @@ button {
   width: 24px;
   height: 24px; }
 
-.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf {
+.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle {
   border: 0;
   min-height: 0;
   padding: 0;
   opacity: .5;
   transition: opacity .2s ease-out; }
-  .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active {
+  .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active {
     background-color: transparent;
     opacity: .25; }
 
@@ -4228,7 +4228,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
 .inaccessible .subfilter-enabled {
   color: #b2b2b2; }
 
-.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active {
+.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active {
   background-color: transparent;
   opacity: 1; }
 
@@ -5950,7 +5950,7 @@ svg {
   .preprocessing-list select {
     width: 100%;
     min-width: 0; }
-  .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) {
+  .preprocessing-list .btn-link:not(:last-of-type) {
     margin-right: 10px; }
   .preprocessing-list .preprocessing-list-head,
   .preprocessing-list .preprocessing-list-foot,
@@ -6749,44 +6749,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
   /* for IE11 only. Fixed cell height if table has 100% height */
   .host-avail-widget td {
     height: 100%; } }
-.interface-container {
-  width: fit-content;
-  width: -moz-fit-content;
-  padding-left: 0; }
-  .interface-container:not(.interface-container-header):not(:empty) {
-    margin-bottom: 5px; }
-    .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) {
-      border-top: 1px solid #4f4f4f;
-      padding-top: 10px; }
-  .interface-container:empty {
-    display: none; }
-  .interface-container .interface-row {
-    display: grid;
-    grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr;
-    grid-template-rows: 24px 1fr;
-    gap: 5px; }
-    .interface-container .interface-row:not(:first-of-type) {
-      margin-top: 5px; }
-    .interface-container .interface-row[data-type] .interface-cell-details {
-      display: none;
-      grid-column: 1/-1; }
-    .interface-container .interface-row .interface-cell {
-      align-self: center; }
-      .interface-container .interface-row .interface-cell .interface-btn-toggle {
-        display: none; }
-      .interface-container .interface-row .interface-cell.interface-cell-header {
-        color: #737373;
-        text-align: left; }
-      .interface-container .interface-row .interface-cell .table-forms-td-left,
-      .interface-container .interface-row .interface-cell .table-forms-td-right {
-        padding-bottom: 0; }
+.table-forms-td-right .interfaces {
+  margin-top: 5px; }
 
-.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body {
-  display: none; }
-.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body {
-  display: block; }
-.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle {
-  display: inline-block; }
+.interfaces {
+  display: grid;
+  grid-template-columns: 26px repeat(7, max-content);
+  margin-bottom: 5px;
+  line-height: 24px; }
+  .interfaces .interface-container {
+    display: contents; }
+    .interfaces .interface-container.interface-container-header .interface-cell {
+      padding: 0 5px 0 0;
+      color: #737373; }
+    .interfaces .interface-container.interface-container-header .interface-cell-action {
+      grid-column: span 2; }
+    .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) {
+      padding-top: 10px;
+      margin-top: 5px;
+      border-top: 1px solid #4f4f4f; }
+  .interfaces .interface-row {
+    display: contents; }
+    .interfaces .interface-row[data-type="2"] .interface-btn-toggle {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; }
+    .interfaces .interface-row[data-type="2"] .list-accordion-item-body {
+      display: none;
+      padding-top: 0; }
+    .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+      background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; }
+    .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body {
+      display: block; }
+  .interfaces .interface-cell {
+    padding: 5px 5px 5px 0; }
+    .interfaces .interface-cell.interface-cell-details {
+      display: none;
+      grid-column: 1 / -1; }
+  .interfaces .interface-btn-toggle {
+    display: none;
+    vertical-align: top; }
+  .interfaces .no-interface {
+    grid-column: 1 / -1;
+    color: #737373; }
 
 .debug-modal.overlay-dialogue.modal .overlay-dialogue-body {
   overflow-x: auto; }
diff --git a/ui/assets/styles/hc-dark.css b/ui/assets/styles/hc-dark.css
index 2d35fa9431b..4633a2344af 100644
--- a/ui/assets/styles/hc-dark.css
+++ b/ui/assets/styles/hc-dark.css
@@ -3795,7 +3795,7 @@ button {
     background-color: #414141;
     border-color: #bbbbbb; }
 
-.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle {
+.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
   position: relative;
   background-color: transparent;
   border: 0;
@@ -3805,14 +3805,14 @@ button {
   font-size: inherit;
   padding: 0;
   min-height: inherit; }
-  .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus {
+  .btn-link:focus {
     outline: none;
     margin-bottom: -2px !important;
     border-bottom: 2px solid rgba(255, 255, 255, 0.5);
     box-shadow: 0 0 0 0 !important; }
-  .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle {
+  .btn-link[disabled] {
     background-color: transparent; }
-    .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover {
+    .btn-link[disabled]:hover {
       background-color: transparent; }
 
 .btn-kiosk {
@@ -3857,10 +3857,10 @@ button {
 .btn-widget-action {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; }
 
-.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+.btn-widget-collapse {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; }
 
-.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle {
+.btn-widget-expand {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; }
 
 .btn-widget-edit {
@@ -4140,7 +4140,7 @@ button {
 .btn-dashboard-normal {
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
 
-.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle {
+.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock {
   width: 24px;
   height: 24px;
   margin: 2px 2px 0 0; }
@@ -4149,13 +4149,13 @@ button {
   width: 24px;
   height: 24px; }
 
-.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf {
+.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle {
   border: 0;
   min-height: 0;
   padding: 0;
   opacity: .5;
   transition: opacity .2s ease-out; }
-  .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active {
+  .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active {
     background-color: transparent;
     opacity: .25; }
 
@@ -4183,7 +4183,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
 .inaccessible .subfilter-enabled {
   color: #bfbfbf; }
 
-.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active {
+.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active {
   background-color: transparent;
   opacity: 1; }
 
@@ -5896,7 +5896,7 @@ svg {
   .preprocessing-list select {
     width: 100%;
     min-width: 0; }
-  .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) {
+  .preprocessing-list .btn-link:not(:last-of-type) {
     margin-right: 10px; }
   .preprocessing-list .preprocessing-list-head,
   .preprocessing-list .preprocessing-list-foot,
@@ -6695,44 +6695,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
   /* for IE11 only. Fixed cell height if table has 100% height */
   .host-avail-widget td {
     height: 100%; } }
-.interface-container {
-  width: fit-content;
-  width: -moz-fit-content;
-  padding-left: 0; }
-  .interface-container:not(.interface-container-header):not(:empty) {
-    margin-bottom: 5px; }
-    .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) {
-      border-top: 1px solid #666666;
-      padding-top: 10px; }
-  .interface-container:empty {
-    display: none; }
-  .interface-container .interface-row {
-    display: grid;
-    grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr;
-    grid-template-rows: 24px 1fr;
-    gap: 5px; }
-    .interface-container .interface-row:not(:first-of-type) {
-      margin-top: 5px; }
-    .interface-container .interface-row[data-type] .interface-cell-details {
-      display: none;
-      grid-column: 1/-1; }
-    .interface-container .interface-row .interface-cell {
-      align-self: center; }
-      .interface-container .interface-row .interface-cell .interface-btn-toggle {
-        display: none; }
-      .interface-container .interface-row .interface-cell.interface-cell-header {
-        color: #cacaca;
-        text-align: left; }
-      .interface-container .interface-row .interface-cell .table-forms-td-left,
-      .interface-container .interface-row .interface-cell .table-forms-td-right {
-        padding-bottom: 0; }
+.table-forms-td-right .interfaces {
+  margin-top: 5px; }
 
-.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body {
-  display: none; }
-.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body {
-  display: block; }
-.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle {
-  display: inline-block; }
+.interfaces {
+  display: grid;
+  grid-template-columns: 26px repeat(7, max-content);
+  margin-bottom: 5px;
+  line-height: 24px; }
+  .interfaces .interface-container {
+    display: contents; }
+    .interfaces .interface-container.interface-container-header .interface-cell {
+      padding: 0 5px 0 0;
+      color: #cacaca; }
+    .interfaces .interface-container.interface-container-header .interface-cell-action {
+      grid-column: span 2; }
+    .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) {
+      padding-top: 10px;
+      margin-top: 5px;
+      border-top: 1px solid #666666; }
+  .interfaces .interface-row {
+    display: contents; }
+    .interfaces .interface-row[data-type="2"] .interface-btn-toggle {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; }
+    .interfaces .interface-row[data-type="2"] .list-accordion-item-body {
+      display: none;
+      padding-top: 0; }
+    .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+      background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; }
+    .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body {
+      display: block; }
+  .interfaces .interface-cell {
+    padding: 5px 5px 5px 0; }
+    .interfaces .interface-cell.interface-cell-details {
+      display: none;
+      grid-column: 1 / -1; }
+  .interfaces .interface-btn-toggle {
+    display: none;
+    vertical-align: top; }
+  .interfaces .no-interface {
+    grid-column: 1 / -1;
+    color: #cacaca; }
 
 .debug-modal.overlay-dialogue.modal .overlay-dialogue-body {
   overflow-x: auto; }
@@ -7106,10 +7112,10 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .btn-widget-action {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -618px; }
 
-.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+.btn-widget-collapse {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -654px; }
 
-.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle {
+.btn-widget-expand {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -318px -690px; }
 
 .btn-widget-edit {
@@ -7258,10 +7264,10 @@ a.link-action {
   border: none !important;
   background-color: #666666 !important; }
 
-.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle {
+.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
   font-weight: bold !important;
   color: #ffffff !important; }
-  .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus {
+  .btn-link:focus {
     margin-bottom: -3px !important;
     border-bottom: 3px solid #ffffff !important; }
 
@@ -7775,3 +7781,8 @@ td.inactive-bg {
   content: " /"; }
 .breadcrumbs > :last-child::after {
   content: ""; }
+
+.interfaces .interface-row[data-type="2"] .interface-btn-toggle {
+  background-position: -318px -690px; }
+.interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+  background-position: -318px -655px; }
diff --git a/ui/assets/styles/hc-light.css b/ui/assets/styles/hc-light.css
index df2ed1b17fe..502fd43be4d 100644
--- a/ui/assets/styles/hc-light.css
+++ b/ui/assets/styles/hc-light.css
@@ -3795,7 +3795,7 @@ button {
     background-color: #f4f4f4;
     border-color: #000000; }
 
-.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle {
+.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
   position: relative;
   background-color: transparent;
   border: 0;
@@ -3805,14 +3805,14 @@ button {
   font-size: inherit;
   padding: 0;
   min-height: inherit; }
-  .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus {
+  .btn-link:focus {
     outline: none;
     margin-bottom: -2px !important;
     border-bottom: 2px solid rgba(0, 0, 0, 0.5);
     box-shadow: 0 0 0 0 !important; }
-  .btn-link[disabled], .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle {
+  .btn-link[disabled] {
     background-color: transparent; }
-    .btn-link[disabled]:hover, .interface-container .interface-row .interface-cell [disabled].interface-btn-toggle:hover {
+    .btn-link[disabled]:hover {
       background-color: transparent; }
 
 .btn-kiosk {
@@ -3857,10 +3857,10 @@ button {
 .btn-widget-action {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -618px; }
 
-.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+.btn-widget-collapse {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -654px; }
 
-.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle {
+.btn-widget-expand {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -689px; }
 
 .btn-widget-edit {
@@ -4140,7 +4140,7 @@ button {
 .btn-dashboard-normal {
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }
 
-.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle {
+.btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock {
   width: 24px;
   height: 24px;
   margin: 2px 2px 0 0; }
@@ -4149,13 +4149,13 @@ button {
   width: 24px;
   height: 24px; }
 
-.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle, .btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle, .btn-dashboard-conf {
+.filter-container.tabfilter-container .icon-edit, .btn-dashboard-page-properties, .btn-iterator-page-previous, .btn-iterator-page-next, .btn-widget-action, .btn-widget-collapse, .btn-widget-expand, .btn-widget-edit, .btn-alarm-on, .btn-alarm-off, .btn-sound-on, .btn-sound-off, .btn-info-clock, .btn-dashboard-conf, .interfaces .interface-row[data-type="2"] .interface-btn-toggle {
   border: 0;
   min-height: 0;
   padding: 0;
   opacity: .5;
   transition: opacity .2s ease-out; }
-  .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle, [disabled].btn-dashboard-conf, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:hover, [disabled].btn-dashboard-conf:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:focus, [disabled].btn-dashboard-conf:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] [disabled].interface-btn-toggle:active, [disabled].btn-dashboard-conf:active {
+  .filter-container.tabfilter-container [disabled].icon-edit, [disabled].btn-dashboard-page-properties, [disabled].btn-iterator-page-previous, [disabled].btn-iterator-page-next, [disabled].btn-widget-action, [disabled].btn-widget-collapse, [disabled].btn-widget-expand, [disabled].btn-widget-edit, [disabled].btn-alarm-on, [disabled].btn-alarm-off, [disabled].btn-sound-on, [disabled].btn-sound-off, [disabled].btn-info-clock, [disabled].btn-dashboard-conf, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle, .filter-container.tabfilter-container [disabled].icon-edit:hover, [disabled].btn-dashboard-page-properties:hover, [disabled].btn-iterator-page-previous:hover, [disabled].btn-iterator-page-next:hover, [disabled].btn-widget-action:hover, [disabled].btn-widget-collapse:hover, [disabled].btn-widget-expand:hover, [disabled].btn-widget-edit:hover, [disabled].btn-alarm-on:hover, [disabled].btn-alarm-off:hover, [disabled].btn-sound-on:hover, [disabled].btn-sound-off:hover, [disabled].btn-info-clock:hover, [disabled].btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:hover, .filter-container.tabfilter-container [disabled].icon-edit:focus, [disabled].btn-dashboard-page-properties:focus, [disabled].btn-iterator-page-previous:focus, [disabled].btn-iterator-page-next:focus, [disabled].btn-widget-action:focus, [disabled].btn-widget-collapse:focus, [disabled].btn-widget-expand:focus, [disabled].btn-widget-edit:focus, [disabled].btn-alarm-on:focus, [disabled].btn-alarm-off:focus, [disabled].btn-sound-on:focus, [disabled].btn-sound-off:focus, [disabled].btn-info-clock:focus, [disabled].btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:focus, .filter-container.tabfilter-container [disabled].icon-edit:active, [disabled].btn-dashboard-page-properties:active, [disabled].btn-iterator-page-previous:active, [disabled].btn-iterator-page-next:active, [disabled].btn-widget-action:active, [disabled].btn-widget-collapse:active, [disabled].btn-widget-expand:active, [disabled].btn-widget-edit:active, [disabled].btn-alarm-on:active, [disabled].btn-alarm-off:active, [disabled].btn-sound-on:active, [disabled].btn-sound-off:active, [disabled].btn-info-clock:active, [disabled].btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] [disabled].interface-btn-toggle:active {
     background-color: transparent;
     opacity: .25; }
 
@@ -4183,7 +4183,7 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
 .inaccessible .subfilter-enabled {
   color: #bfbfbf; }
 
-.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:hover, .btn-dashboard-conf:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:focus, .btn-dashboard-conf:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle:active, .btn-dashboard-conf:active {
+.filter-container.tabfilter-container .icon-edit:hover, .btn-dashboard-page-properties:hover, .btn-iterator-page-previous:hover, .btn-iterator-page-next:hover, .btn-widget-action:hover, .btn-widget-collapse:hover, .btn-widget-expand:hover, .btn-widget-edit:hover, .btn-alarm-on:hover, .btn-alarm-off:hover, .btn-sound-on:hover, .btn-sound-off:hover, .btn-info-clock:hover, .btn-dashboard-conf:hover, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:hover, .filter-container.tabfilter-container .icon-edit:focus, .btn-dashboard-page-properties:focus, .btn-iterator-page-previous:focus, .btn-iterator-page-next:focus, .btn-widget-action:focus, .btn-widget-collapse:focus, .btn-widget-expand:focus, .btn-widget-edit:focus, .btn-alarm-on:focus, .btn-alarm-off:focus, .btn-sound-on:focus, .btn-sound-off:focus, .btn-info-clock:focus, .btn-dashboard-conf:focus, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:focus, .filter-container.tabfilter-container .icon-edit:active, .btn-dashboard-page-properties:active, .btn-iterator-page-previous:active, .btn-iterator-page-next:active, .btn-widget-action:active, .btn-widget-collapse:active, .btn-widget-expand:active, .btn-widget-edit:active, .btn-alarm-on:active, .btn-alarm-off:active, .btn-sound-on:active, .btn-sound-off:active, .btn-info-clock:active, .btn-dashboard-conf:active, .interfaces .interface-row[data-type="2"] .interface-btn-toggle:active {
   background-color: transparent;
   opacity: 1; }
 
@@ -5896,7 +5896,7 @@ svg {
   .preprocessing-list select {
     width: 100%;
     min-width: 0; }
-  .preprocessing-list .btn-link:not(:last-of-type), .preprocessing-list .interface-container .interface-row .interface-cell .interface-btn-toggle:not(:last-of-type), .interface-container .interface-row .interface-cell .preprocessing-list .interface-btn-toggle:not(:last-of-type) {
+  .preprocessing-list .btn-link:not(:last-of-type) {
     margin-right: 10px; }
   .preprocessing-list .preprocessing-list-head,
   .preprocessing-list .preprocessing-list-foot,
@@ -6695,44 +6695,50 @@ button.icon-action-command, button.icon-action-close, button.icon-action-msg, bu
   /* for IE11 only. Fixed cell height if table has 100% height */
   .host-avail-widget td {
     height: 100%; } }
-.interface-container {
-  width: fit-content;
-  width: -moz-fit-content;
-  padding-left: 0; }
-  .interface-container:not(.interface-container-header):not(:empty) {
-    margin-bottom: 5px; }
-    .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) {
-      border-top: 1px solid #888888;
-      padding-top: 10px; }
-  .interface-container:empty {
-    display: none; }
-  .interface-container .interface-row {
-    display: grid;
-    grid-template-columns: 26px 36px 225px 175px 85px 100px 20px 1fr;
-    grid-template-rows: 24px 1fr;
-    gap: 5px; }
-    .interface-container .interface-row:not(:first-of-type) {
-      margin-top: 5px; }
-    .interface-container .interface-row[data-type] .interface-cell-details {
-      display: none;
-      grid-column: 1/-1; }
-    .interface-container .interface-row .interface-cell {
-      align-self: center; }
-      .interface-container .interface-row .interface-cell .interface-btn-toggle {
-        display: none; }
-      .interface-container .interface-row .interface-cell.interface-cell-header {
-        color: #333333;
-        text-align: left; }
-      .interface-container .interface-row .interface-cell .table-forms-td-left,
-      .interface-container .interface-row .interface-cell .table-forms-td-right {
-        padding-bottom: 0; }
+.table-forms-td-right .interfaces {
+  margin-top: 5px; }
 
-.interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .list-accordion-item-body {
-  display: none; }
-.interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .list-accordion-item-body {
-  display: block; }
-.interface-row.list-accordion-item[data-type="2"] .interface-btn-toggle {
-  display: inline-block; }
+.interfaces {
+  display: grid;
+  grid-template-columns: 26px repeat(7, max-content);
+  margin-bottom: 5px;
+  line-height: 24px; }
+  .interfaces .interface-container {
+    display: contents; }
+    .interfaces .interface-container.interface-container-header .interface-cell {
+      padding: 0 5px 0 0;
+      color: #333333; }
+    .interfaces .interface-container.interface-container-header .interface-cell-action {
+      grid-column: span 2; }
+    .interfaces .interface-container:not(.interface-container-header):not(:empty) ~ .interface-container:not(:empty) .interface-cell:not(.interface-cell-details) {
+      padding-top: 10px;
+      margin-top: 5px;
+      border-top: 1px solid #888888; }
+  .interfaces .interface-row {
+    display: contents; }
+    .interfaces .interface-row[data-type="2"] .interface-btn-toggle {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -690px; }
+    .interfaces .interface-row[data-type="2"] .list-accordion-item-body {
+      display: none;
+      padding-top: 0; }
+    .interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+      background: url("../img/icon-sprite.svg?20211222") no-repeat -6px -655px; }
+    .interfaces .interface-row[data-type="2"].list-accordion-item-opened .list-accordion-item-body {
+      display: block; }
+  .interfaces .interface-cell {
+    padding: 5px 5px 5px 0; }
+    .interfaces .interface-cell.interface-cell-details {
+      display: none;
+      grid-column: 1 / -1; }
+  .interfaces .interface-btn-toggle {
+    display: none;
+    vertical-align: top; }
+  .interfaces .no-interface {
+    grid-column: 1 / -1;
+    color: #333333; }
 
 .debug-modal.overlay-dialogue.modal .overlay-dialogue-body {
   overflow-x: auto; }
@@ -7051,10 +7057,10 @@ z-select.z-select-host-interface li[disabled] .description:not(:empty),
 .btn-widget-action {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -618px; }
 
-.btn-widget-collapse, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+.btn-widget-collapse {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -654px; }
 
-.btn-widget-expand, .interface-row.list-accordion-item[data-type="2"].list-accordion-item-closed .interface-btn-toggle {
+.btn-widget-expand {
   background: url("../img/icon-sprite.svg?20211222") no-repeat -165px -690px; }
 
 .btn-widget-edit {
@@ -7198,10 +7204,10 @@ a.link-action {
   border: none !important;
   background-color: #666666 !important; }
 
-.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .interface-container .interface-row .interface-cell .interface-btn-toggle {
+.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
   font-weight: bold !important;
   color: #000000 !important; }
-  .btn-link:focus, .interface-container .interface-row .interface-cell .interface-btn-toggle:focus {
+  .btn-link:focus {
     margin-bottom: -3px !important;
     border-bottom: 3px solid #000000 !important; }
 
@@ -7688,3 +7694,8 @@ td.inactive-bg {
   content: " /"; }
 .breadcrumbs > :last-child::after {
   content: ""; }
+
+.interfaces .interface-row[data-type="2"] .interface-btn-toggle {
+  background-position: -165px -690px; }
+.interfaces .interface-row[data-type="2"].list-accordion-item-opened .interface-btn-toggle {
+  background-position: -165px -655px; }
diff --git a/ui/include/defines.inc.php b/ui/include/defines.inc.php
index f0a7b70b05a..f8c58aecb61 100644
--- a/ui/include/defines.inc.php
+++ b/ui/include/defines.inc.php
@@ -2096,6 +2096,7 @@ define('ZBX_STYLE_ICON_SECRET_TEXT', 'icon-secret');
 define('ZBX_STYLE_ICON_HELP_HINT', 'icon-help-hint');
 
 // Host interface styles.
+define('ZBX_STYLE_HOST_INTERFACES', 'interfaces');
 define('ZBX_STYLE_HOST_INTERFACE_CONTAINER', 'interface-container');
 define('ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER', 'interface-container-header');
 define('ZBX_STYLE_HOST_INTERFACE_ROW', 'interface-row');
diff --git a/ui/include/views/configuration.host.prototype.edit.php b/ui/include/views/configuration.host.prototype.edit.php
index 20f241ddcd5..30239ce5795 100644
--- a/ui/include/views/configuration.host.prototype.edit.php
+++ b/ui/include/views/configuration.host.prototype.edit.php
@@ -253,7 +253,8 @@ $host_tab->addRow(
 			->setModern(true)
 			->setReadonly($host_prototype['templateid'] != 0),
 		(new CDiv([$interface_header, $agent_interfaces, $snmp_interfaces, $jmx_interfaces, $ipmi_interfaces]))
-			->setId('interfaces-table'),
+			->setId('interfaces-table')
+			->addClass(ZBX_STYLE_HOST_INTERFACES),
 		new CDiv(
 			(new CButton('interface-add', _('Add')))
 				->addClass(ZBX_STYLE_BTN_LINK)
diff --git a/ui/js/hostinterfacemanager.js b/ui/js/hostinterfacemanager.js
index 12200a7921f..61ca41115c1 100644
--- a/ui/js/hostinterfacemanager.js
+++ b/ui/js/hostinterfacemanager.js
@@ -46,7 +46,7 @@ class HostInterfaceManager {
 	static ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER = 'interface-container-header';
 	static ZBX_STYLE_HOST_INTERFACE_INPUT_EXPAND = 'interface-input-expand';
 	static ZBX_STYLE_HOST_INTERFACE_ROW = 'interface-row';
-	static ZBX_STYLE_GREY = 'grey';
+	static ZBX_STYLE_HOST_NO_INTERFACE = 'no-interface';
 	static ZBX_STYLE_LIST_ACCORDION_ITEM = 'list-accordion-item';
 	static ZBX_STYLE_LIST_ACCORDION_ITEM_OPENED = 'list-accordion-item-opened';
 
@@ -82,10 +82,7 @@ class HostInterfaceManager {
 
 		this.$noInterfacesMsg = jQuery('<div>', {
 			html: t('No interfaces are defined.'),
-			class: HostInterfaceManager.ZBX_STYLE_GREY,
-			css: {
-				'padding': '5px 0px'
-			}
+			class: HostInterfaceManager.ZBX_STYLE_HOST_NO_INTERFACE
 		})
 			.insertAfter(jQuery('.' + HostInterfaceManager.ZBX_STYLE_HOST_INTERFACE_CONTAINER_HEADER));