@scrabble-solver/scrabble-solver 2.15.5 → 2.15.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.15.5",
+  "version": "2.15.6",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -27,21 +27,21 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.25",
+    "@floating-ui/react": "^0.26.27",
     "@kamilmielnik/trie": "^3.1.0",
     "@reduxjs/toolkit": "^2.3.0",
-    "@scrabble-solver/configs": "^2.15.5",
-    "@scrabble-solver/constants": "^2.15.5",
-    "@scrabble-solver/dictionaries": "^2.15.5",
-    "@scrabble-solver/logger": "^2.15.5",
-    "@scrabble-solver/solver": "^2.15.5",
-    "@scrabble-solver/types": "^2.15.5",
-    "@scrabble-solver/word-definitions": "^2.15.5",
+    "@scrabble-solver/configs": "^2.15.6",
+    "@scrabble-solver/constants": "^2.15.6",
+    "@scrabble-solver/dictionaries": "^2.15.6",
+    "@scrabble-solver/logger": "^2.15.6",
+    "@scrabble-solver/solver": "^2.15.6",
+    "@scrabble-solver/types": "^2.15.6",
+    "@scrabble-solver/word-definitions": "^2.15.6",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^15.0.1",
+    "next": "^15.0.2",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
     "react-cool-onclickoutside": "^1.7.0",
@@ -53,11 +53,11 @@
     "redux-saga": "^1.3.0",
     "store2": "^2.14.3",
     "use-debounce": "^10.0.4",
-    "workbox-expiration": "^7.1.0",
-    "workbox-precaching": "^7.1.0",
-    "workbox-routing": "^7.1.0",
-    "workbox-webpack-plugin": "^7.1.0",
-    "workbox-window": "^7.1.0"
+    "workbox-expiration": "^7.3.0",
+    "workbox-precaching": "^7.3.0",
+    "workbox-routing": "^7.3.0",
+    "workbox-webpack-plugin": "^7.3.0",
+    "workbox-window": "^7.3.0"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
@@ -71,7 +71,7 @@
     "@types/react-window": "^1.8.8",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "sass": "^1.80.4"
+    "sass": "^1.80.6"
   },
-  "gitHead": "fcb31b606fe7fb501c7e00a6c00a676fb7d2174f"
+  "gitHead": "5667158791e9edc65ae1e818302b230cf4ce1724"
 }

package/src/components/Dictionary/Dictionary.module.scss

@@ -4,7 +4,6 @@
   position: relative;
   transition: var(--transition);
   word-break: break-word;
-  overflow: hidden;
 
   &.isAllowed {
     background-color: var(--color--green--light);
@@ -13,6 +12,10 @@
   &.isNotAllowed {
     background-color: var(--color--red--light);
   }
+
+  &:focus-within {
+    @include focus-effect;
+  }
 }
 
 .content {
@@ -20,6 +23,11 @@
 
   height: 100%;
   overflow-y: auto;
+  border-radius: inherit;
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .result {

package/src/components/Dictionary/Dictionary.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
+import { useAppLayout } from 'hooks';
 import { selectDictionary, selectDictionaryError, useTranslate, useTypedSelector } from 'state';
 
 import EmptyState from '../EmptyState';
@@ -14,6 +15,7 @@ interface Props {
 
 const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
+  const { dictionaryResultsHeight } = useAppLayout();
   const { results, isLoading } = useTypedSelector(selectDictionary);
   const error = useTypedSelector(selectDictionaryError);
   const isLastAllowed = results.at(-1)?.isAllowed;
@@ -24,6 +26,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
         [styles.isAllowed]: isLastAllowed === true,
         [styles.isNotAllowed]: isLastAllowed === false,
       })}
+      style={{ height: dictionaryResultsHeight }}
     >
       <div className={styles.content}>
         {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}

package/src/hooks/useAppLayout.ts

@@ -17,6 +17,7 @@ import {
   RACK_TILE_SIZE_MAX,
   RESULTS_COLUMN_WIDTH,
   SOLVER_COLUMN_WIDTH,
+  TEXT_INPUT_HEIGHT,
 } from 'parameters';
 import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
 import { ResultColumnId } from 'types';
@@ -67,6 +68,7 @@ const useAppLayout = () => {
   const maxControlsWidth = tileSize * config.rackSize + 2 * BORDER_WIDTH;
   const showResultsInModal = isLessThanL;
   const dictionaryHeight = showResultsInModal ? DICTIONARY_HEIGHT_MOBILE : DICTIONARY_HEIGHT;
+  const dictionaryResultsHeight = dictionaryHeight - TEXT_INPUT_HEIGHT - 2 * BORDER_WIDTH;
   const modalWidth = isLessThanS ? viewportWidth : MODAL_WIDTH;
   const resultsHeight = isLessThanL
     ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
@@ -86,6 +88,7 @@ const useAppLayout = () => {
     coordinatesFontSize: coordinatesSize * 0.6,
     coordinatesSize,
     dictionaryHeight,
+    dictionaryResultsHeight,
     isModalFullWidth: isLessThanS,
     logoHeight,
     logoWidth: logoHeight * LOGO_ASPECT_RATIO,