Quiz Attempts list design issue fixes

assets/src/scss/frontend/components/_quiz-attempt-details.scss

@@ -50,6 +50,7 @@
     display: grid;
     grid-template-columns: 300px 1fr;
     gap: 128px;
+    padding-bottom: calc( var(--tutor-quiz-summary-footer-height) + #{$tutor-spacing-4} );
 
     @include tutor-breakpoint-down(sm) {
       grid-template-columns: 1fr;
@@ -149,8 +150,10 @@
     background-color: $tutor-surface-base;
     border-top: 1px solid $tutor-border-idle;
     box-shadow: 0px -4px 13px -2px #1018280f;
-    position: sticky;
+    position: fixed;
     bottom: 0;
+    left: 0;
+    right: 0;
 
     .tutor-quiz-summary-footer-inner {
       max-width: 1220px;

assets/src/scss/frontend/components/_quiz-attempts.scss

@@ -41,6 +41,23 @@
 
     &:hover {
       background-color: $tutor-surface-l1-hover;
+      .tutor-quiz-attempts-item {
+        .tutor-quiz-item-info {
+          .tutor-quiz-attempts-expand-btn {
+            @include tutor-flex(row, center);
+          }
+        }
+      }
+    }
+
+    &.tutor-quiz-previous-attempts {
+      .tutor-quiz-attempts-item {
+        .tutor-quiz-item-info {
+          .tutor-quiz-attempts-expand-btn {
+            @include tutor-flex(row, center);
+          }
+        }
+      }
     }
 
     &.tutor-quiz-previous-attempts {
@@ -87,9 +104,14 @@
       .tutor-quiz-item-info {
         grid-area: info;
 
+        &-expanded {
+          @include tutor-flex(row, center);
+          gap: $tutor-spacing-4;
+          text-align: center;
+        }
+
         &-title {
           @include tutor-typography(medium, semibold);
-          margin-bottom: $tutor-spacing-2;
 
           @include tutor-breakpoint-down(sm) {
             font-size: $tutor-font-size-small;
@@ -117,8 +139,8 @@
         }
 
         .tutor-quiz-attempts-expand-btn {
+          display: none;
           @include tutor-button-reset();
-          @include tutor-flex(row, center);
           gap: $tutor-spacing-2;
           @include tutor-typography(small, medium, brand);
           cursor: pointer;
@@ -209,7 +231,7 @@
 
       .tutor-quiz-item-result {
         grid-area: result;
-        @include tutor-flex(column, center, center);
+        @include tutor-flex(column, left, center);
 
         @include tutor-breakpoint-down(sm) {
           height: 100%;
@@ -254,6 +276,12 @@
           }
         }
 
+        &:hover {
+          .tutor-quiz-item-info-title{
+            color: $tutor-brand-700;
+          }
+        }
+
         &:hover:has(.tutor-quiz-item-result-more) {
           .tutor-quiz-item-result {
             .tutor-badge {
@@ -298,7 +326,7 @@
         }
 
         &:hover {
-          background-color: $tutor-surface-base;
+          background-color: $tutor-surface-l1-hover;
         }
 
         &:not(:last-child) {
@@ -339,6 +367,16 @@
       border-radius: $tutor-radius-2xl;
     }
   }
+
+  .tutor-quiz-students-attempts {
+    &-filter-item {
+      &:first-child {
+        button {
+          padding: 0;
+        }
+      }
+    }
+  }
 }
 
 .tutor-quiz-item-actions {

assets/src/scss/frontend/components/_quiz-summary.scss

@@ -129,4 +129,18 @@
       }
     }
   }
+
+  .tutor-empty-quiz-details{
+    @include tutor-flex(row,center,center);
+    padding: $tutor-spacing-6;
+    background-color: $tutor-surface-critical;
+    border: 1px solid $tutor-border-error-tertiary;
+    border-radius: $tutor-radius-lg;
+    gap: $tutor-spacing-4;
+    margin-top: $tutor-spacing-6;
+    .error-message{
+      @include tutor-typography(small,regular);
+      color: $tutor-text-critical;
+    }
+  }
 }

classes/Quiz_Attempts_List.php

@@ -20,6 +20,7 @@
 use Tutor\Components\Button;
 use Tutor\Components\Constants\Size;
 use Tutor\Components\Constants\Positions;
+use Tutor\Components\Constants\Variant;
 use Tutor\Components\Popover;
 use Tutor\Helpers\UrlHelper;
 use Tutor\Models\QuizModel;
@@ -468,7 +469,7 @@ public function render_retry_button( $course_id = 0, $quiz_id = 0, $attempt = ar
 	 */
 	private function get_kebab_button() {
 		$kebab_button = Button::make()
-				->icon( Icon::THREE_DOTS_VERTICAL )
+				->icon( Icon::ELLIPSES )
 				->attr( 'x-ref', 'trigger' )
 				->attr( '@click', 'toggle()' )
 				->attr( 'class', 'tutor-quiz-item-result-more' )
@@ -526,6 +527,25 @@ public function render_student_attempt_popover( $attempt = array(), $attempts_co
 			return;
 		}
 
+		if ( $is_learning_area && ! $is_quiz_details_hidden ) {
+
+			$query_param = array( 'action' => 'view_details' );
+
+			$url = $this->get_review_url( $attempt, $query_param );
+
+			$button_html = Button::make()
+				->tag( 'a' )
+				->label( __( 'Details', 'tutor' ) )
+				->size( Size::X_SMALL )
+				->variant( Variant::PRIMARY )
+				->attr( 'href', $url )
+				->attr( 'class', 'tutor-quiz-item-result-more tutor-quiz-details-btn' )
+				->get();
+
+			echo '<div class="tutor-flex">' . wp_kses_post( $button_html ) . '</div>';
+			return;
+		}
+
 		$popover = Popover::make()
 			->trigger( $this->get_kebab_button() )
 			->placement( 'bottom' )