Merge pull request 'fix(frontend): hide calendar popups on empty dates' (#25) from fix/calendar-hide-popover-empty-days into main

Reviewed-on: #25

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-frontend",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.4.1",
+      "version": "0.4.3",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "calendar-run-frontend",
   "private": true,
-  "version": "0.4.1",
+  "version": "0.4.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/RacesCalendar.tsx

@@ -120,7 +120,7 @@ function CalendarMonthBlock(props: {
               className={`races-cal__cell${hasRaces ? " races-cal__cell--has-race" : ""}${isOpen ? " races-cal__cell--open" : ""}`}
               onMouseEnter={() => {
                 cancelClose();
-                setOpenYmd(ymd);
+                setOpenYmd(hasRaces ? ymd : null);
               }}
               onMouseLeave={scheduleClose}
             >
@@ -132,7 +132,7 @@ function CalendarMonthBlock(props: {
                 }}
                 onFocus={() => {
                   cancelClose();
-                  setOpenYmd(ymd);
+                  setOpenYmd(hasRaces ? ymd : null);
                 }}
                 onBlur={(e) => {
                   const next = e.relatedTarget as Node | null;
@@ -144,7 +144,7 @@ function CalendarMonthBlock(props: {
               >
                 {day}
               </button>
-              {isOpen ? (
+              {isOpen && hasRaces ? (
                 <DayPopover
                   ymd={ymd}
                   races={dayRaces}
@@ -187,7 +187,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
 
   return (
     <div className="races-cal">
-      <p className="races-cal__hint">Наведите на дату — краткая информация. Клик — страница дня.</p>
+      <p className="races-cal__hint">Наведите на дату с забегом — краткая информация. Клик — страница дня.</p>
       {focusedMonthIndex === null || Number.isNaN(focusedMonthIndex) ? (
         <div className="races-cal__year">
           {MONTH_NAMES_RU_SHORT.map((_, mi) => (

frontend/src/styles/global.css

@@ -321,6 +321,15 @@ a {
 .race-card--action {
   padding: 0;
   overflow: visible;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.race-card--action:hover,
+.race-card--action:focus-within {
+  transform: scale(1.02);
+  box-shadow: var(--shadow-card-lift);
 }
 
 .race-card__link-surface {
@@ -333,16 +342,12 @@ a {
   border-radius: var(--radius-sm);
   color: inherit;
   text-decoration: none;
-  transition:
+  outline: none;
-    transform 0.15s ease,
-    box-shadow 0.15s ease;
 }
 
-.race-card--action:hover .race-card__link-surface,
+.race-card__link-surface:focus-visible {
-.race-card--action:focus-within .race-card__link-surface {
+  outline: 2px solid var(--color-accent);
-  transform: scale(1.02);
+  outline-offset: 2px;
-  box-shadow: var(--shadow-card-lift);
-  outline: none;
 }
 
 .race-card__title-text {