Style dictionary :focus-within

- useful when focusing dictionary input with keyboard while its scrollable - Fixes #362
kamilmielnik · Nov 2, 2024 · 7026023 · 7026023
1 parent caf9caa
commit 7026023
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/packages/scrabble-solver/src/components/Dictionary/Dictionary.module.scss b/packages/scrabble-solver/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,13 +12,22 @@
   &.isNotAllowed {
     background-color: var(--color--red--light);
   }
+
+  &:focus-within {
+    @include focus-effect;
+  }
 }
 
 .content {
   @include scrollbars;
 
   height: 100%;
   overflow-y: auto;
+  border-radius: inherit;
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .result {

diff --git a/packages/scrabble-solver/src/components/Dictionary/Dictionary.tsx b/packages/scrabble-solver/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>}

diff --git a/packages/scrabble-solver/src/hooks/useAppLayout.ts b/packages/scrabble-solver/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,