Fix Dashboard Widgets

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Assets/scss/dashboard.scss

@@ -1,40 +1,42 @@
+@import '../../node_modules/bootstrap/scss/_functions';
+@import '../../node_modules/bootstrap/scss/_variables';
+@import '../../node_modules/bootstrap/scss/mixins/_breakpoints';
 
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 567.98px) {
-    :root{
+// Small devices (landscape phones, 576px and up)
+@include media-breakpoint-only(sm) {
+    :root {
         --dashboard-columns: 1;
         --dashboard-columns-default: 1;
     }
 }
 
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-    :root{
+// Medium devices (tablets, 768px and up)
+@include media-breakpoint-only(md) {
+    :root {
         --dashboard-columns: 2;
         --dashboard-columns-default: 2;
-
     }
 }
 
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-    :root{
+// Large devices (desktops, 992px and up)
+@include media-breakpoint-only(lg) {
+    :root {
         --dashboard-columns: 3;
         --dashboard-columns-default: 3;
     }
 }
 
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-    :root{
+// X-Large devices (large desktops, 1200px and up)
+@include media-breakpoint-only(xl) {
+    :root {
         --dashboard-columns: 4;
         --dashboard-columns-default: 4;
     }
 }
 
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-    :root{
+// XX-Large devices (larger desktops, 1400px and up)
+@include media-breakpoint-only(xxl) {
+    :root {
         --dashboard-columns: 6;
         --dashboard-columns-default: 6;
     }
@@ -50,17 +52,22 @@
         grid-column: span var(--dashboard-width);
         overflow-x: hidden;
         grid-row: span var(--dashboard-height);
-        overflow-y: hidden;
+        overflow-y: auto;
 
         & .card {
             & .card-header {
                 border-bottom: none !important;
             }
+
             & .card-footer {
                 border-top: none !important;
             }
         }
     }
+
+    .dashboard-wrapper.ui-resizable {
+        overflow-y: hidden;
+    }
 }
 
 .dashboard-meta {
@@ -78,6 +85,7 @@
             & .card-header {
                 background-color: #fff !important;
             }
+
             & .card-footer {
                 background-color: #fff !important;
             }
@@ -91,6 +99,7 @@
             & .card-header {
                 background-color: rgb(24, 26, 27) !important;
             }
+
             & .card-footer {
                 background-color: rgb(24, 26, 27) !important;
             }

src/OrchardCore.Modules/OrchardCore.AdminDashboard/Views/DashboardWidget.DetailAdmin.cshtml

@@ -1,15 +1,15 @@
-<div class="card @String.Join(" ", Model.Classes.ToArray()) h-100">
+<div class="card h-100 @String.Join(" ", Model.Classes.ToArray())">
     @if (Model.Header != null || Model.Leading != null || Model.ActionsMenu != null)
     {
         <div class="card-header">
             @await DisplayAsync(Model.Leading)
             @await DisplayAsync(Model.Header)
-            @if(Model.ActionsMenu != null )
+            @if (Model.ActionsMenu != null)
             {
                 <div class="btn-group float-end" title="@T["Actions"]">
-                    <a type="button" class="btn btn-sm " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <button type="button" class="btn btn-sm " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
-                    </a>
+                    </button>
                     <div class="actions-menu dropdown-menu">
                         @await DisplayAsync(Model.ActionsMenu)
                     </div>
@@ -24,8 +24,8 @@
             @await DisplayAsync(Model.Tags)
         </div>
     }
-    <div class="card-body">
-    @await DisplayAsync(Model.Content)
+    <div class="card-body p-0">
+        @await DisplayAsync(Model.Content)
     </div>
     @if (Model.Footer != null)
     {

src/OrchardCore.Modules/OrchardCore.AdminDashboard/wwwroot/Styles/dashboard.css

@@ -1,28 +1,28 @@
-@media (max-width: 567.98px) {
+@media (min-width: 576px) and (max-width: 767.98px) {
   :root {
     --dashboard-columns: 1;
     --dashboard-columns-default: 1;
   }
 }
-@media (min-width: 576px) and (max-width: 767.98px) {
+@media (min-width: 768px) and (max-width: 991.98px) {
   :root {
     --dashboard-columns: 2;
     --dashboard-columns-default: 2;
   }
 }
-@media (min-width: 768px) and (max-width: 991.98px) {
+@media (min-width: 992px) and (max-width: 1199.98px) {
   :root {
     --dashboard-columns: 3;
     --dashboard-columns-default: 3;
   }
 }
-@media (min-width: 992px) and (max-width: 1199.98px) {
+@media (min-width: 1200px) and (max-width: 1399.98px) {
   :root {
     --dashboard-columns: 4;
     --dashboard-columns-default: 4;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 1400px) {
   :root {
     --dashboard-columns: 6;
     --dashboard-columns-default: 6;
@@ -38,14 +38,17 @@
   grid-column: span var(--dashboard-width);
   overflow-x: hidden;
   grid-row: span var(--dashboard-height);
-  overflow-y: hidden;
+  overflow-y: auto;
 }
 .dashboard-container .dashboard-wrapper .card .card-header {
   border-bottom: none !important;
 }
 .dashboard-container .dashboard-wrapper .card .card-footer {
   border-top: none !important;
 }
+.dashboard-container .dashboard-wrapper.ui-resizable {
+  overflow-y: hidden;
+}
 
 .dashboard-meta {
   padding-left: 20px;