time-tracking-dashboard-main

Community feedback

• 

  Jay Khatri•4,230

  @khatri2002

  Posted 5 months ago

  Hi @gkilasonia!

  The developed solution looks great!

  Below are some suggestions for improvement:

  ---

  1) Center Alignment Issue (Fixed Padding on body)

  Currently, you've used fixed padding to center align the component in the desktop resolution:

  body {
      padding: 253px 165px 0 165px;
  }
  

  While this works for some screen sizes, it fails on smaller desktops, because the padding values are too large, causing unnecessary vertical scrolling.

  Better & Adaptive Approach Using Flexbox

  A more responsive and standard approach is:

  body {
      display: flex; /* Create a flex container */
      flex-direction: column; /* Stack content vertically */
      align-items: center; /* Center align horizontally */
      justify-content: center; /* Center align vertically */
      min-height: 100vh; /* Take full screen height */
      gap: 5rem; /* Provide spacing between content and footer */
      padding-inline: 165px; /* Only reduce width, avoid unnecessary height padding */
  }
  

  Now, remove the fixed padding on body and any margin-bottom on main.
  This ensures the component remains centered across all resolutions.

  2) Use button Instead of p for Clickable Elements

  Currently, the text elements "Daily", "Weekly", "Monthly" are inside <p> tags; and click events are handled directly on these <p> elements.

  While this works functionally, it is not semantically correct because:

  • A p tag is for static text, not interactive elements.
  • A button is the correct element when an action occurs on click (e.g., selection, toggling).
  • Using <button> improves accessibility (keyboard navigation, screen readers).

  3) Missing Hover Effects

  The hover effects for buttons and cards are missing, as per the design reference.
  Consider adding hover effects to enhance the user experience.

  ---

  The rest of the solution looks amazing! Keep up the fantastic work! 🚀

  00

  Marked as helpful
• 

  P

  Gwinyai•140

  @gkuzivam

  Posted 5 months ago

  good work with setting up the web and mobile version

  00