@scrabble-solver/scrabble-solver 2.16.7 → 2.18.0

package/src/components/NotFound/NotFound.tsx

@@ -1,6 +1,6 @@
 import { type FunctionComponent } from 'react';
 
-import { DashCircleFill } from '@/icons';
+import DashCircleFill from '@/icons/DashCircleFill.svg';
 
 import { PlainTiles } from '../PlainTiles';
 

package/src/components/PlainTiles/PlainTiles.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly dropShadow: string;
+  readonly hide: string;
+  readonly rotate: string;
+  readonly show: string;
+  readonly tile: string;
+  readonly wave: string;
+};
+
+export default styles;

package/src/components/PlainTiles/PlainTiles.tsx

@@ -44,7 +44,6 @@ export const PlainTiles: FunctionComponent<Props> = ({
           key={index}
           points={tile.points}
           size={tile.size}
-          transform={tile.transform}
           x={tile.x}
           y={tile.y}
         />

package/src/components/PlainTiles/Tile.tsx

@@ -6,14 +6,13 @@ interface Props {
   color: string;
   points?: number;
   size: number;
-  transform?: string;
   x: number;
   y: number;
 }
 
-export const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, transform, x, y }) => (
-  <g className={className} fill="#222" transform={transform}>
-    <rect fill={color} height={size} rx={size * 0.15} width={size} x={x} y={y} />
+export const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, x, y }) => (
+  <g className={className} style={{ fill: 'var(--color--foreground)' }}>
+    <rect height={size} rx={size * 0.15} style={{ fill: color }} width={size} x={x} y={y} />
 
     <text
       dominantBaseline="central"

package/src/components/PlainTiles/lib.ts

@@ -3,12 +3,8 @@ import { Game, Locale } from '@scrabble-solver/types';
 
 import {
   PLAIN_TILES_COLOR_DEFAULT,
-  PLAIN_TILES_PADDING_HORIZONTAL,
-  PLAIN_TILES_PADDING_VERTICAL,
   PLAIN_TILES_POINTS_COLORS,
   PLAIN_TILES_TILE_MARGIN,
-  PLAIN_TILES_TILE_MAX_ROTATE,
-  PLAIN_TILES_TILE_MAX_SCATTER,
   PLAIN_TILES_TILE_SIZE,
 } from '@/parameters';
 
@@ -47,17 +43,14 @@ export const createPlainTile = ({
   const points = showPoints ? configPoints : undefined;
   const defaultColor =
     typeof configPoints === 'number' ? PLAIN_TILES_POINTS_COLORS[configPoints] : PLAIN_TILES_COLOR_DEFAULT;
-  const x = getX(cellIndex) + PLAIN_TILES_TILE_SIZE / 2;
-  const y = getY(0) + PLAIN_TILES_TILE_SIZE / 2;
 
   return {
     character,
     color: color || defaultColor,
     points,
     size: PLAIN_TILES_TILE_SIZE,
-    transform: `rotate(${randomize(0, PLAIN_TILES_TILE_MAX_ROTATE)}, ${x}, ${y})`,
-    x: randomize(getX(cellIndex), PLAIN_TILES_TILE_MAX_SCATTER),
-    y: randomize(getY(rowIndex), PLAIN_TILES_TILE_MAX_SCATTER),
+    x: getOffset(cellIndex),
+    y: getOffset(rowIndex),
   };
 };
 
@@ -77,14 +70,6 @@ export const getViewbox = (content: string[][]): string => {
   return `0 0 ${width} ${height}`;
 };
 
-export const getX = (index: number): number => {
-  return PLAIN_TILES_PADDING_HORIZONTAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
-};
-
-export const getY = (index: number): number => {
-  return PLAIN_TILES_PADDING_VERTICAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
-};
-
-export const randomize = (value: number, maxChange: number): number => {
-  return value + maxChange * 2 * (0.5 - Math.random());
+const getOffset = (index: number): number => {
+  return index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
 };

package/src/components/PlainTiles/types.ts

@@ -17,7 +17,6 @@ export interface PlainTile {
   color: string;
   points?: number;
   size: number;
-  transform: string;
   x: number;
   y: number;
 }

package/src/components/Progress/Progress.module.scss

@@ -2,6 +2,13 @@
   width: 100%;
   min-height: 1px;
   border-radius: var(--border--radius);
+  background-image: linear-gradient(
+    90deg,
+    var(--color--progress) 0%,
+    var(--color--progress) var(--progress),
+    var(--color--progress--background) var(--progress),
+    var(--color--progress--background) 100%
+  );
 
   [dir='rtl'] & {
     transform: scaleX(-1);

package/src/components/Progress/Progress.module.scss.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly progress: string;
+};
+
+export default styles;

package/src/components/Progress/Progress.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
-import { type FunctionComponent, type HTMLProps } from 'react';
+import { type CSSProperties, type FunctionComponent, type HTMLProps } from 'react';
 
-import { PROGRESS_COLOR_BACKGROUND, PROGRESS_COLOR_VALUE } from '@/parameters';
 import { selectLocale, useTypedSelector } from '@/state';
 
 import styles from './Progress.module.scss';
@@ -12,11 +11,6 @@ interface Props extends HTMLProps<HTMLDivElement> {
   value: number;
 }
 
-const getGradient = (progress: number, color: string, background: string) => {
-  const percent = 100 * progress;
-  return `linear-gradient(90deg, ${color} 0%, ${color} ${percent}%, ${background} ${percent}%, ${background} 100%)`;
-};
-
 export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, value, ...props }) => {
   const locale = useTypedSelector(selectLocale);
   const progress = value / (max - min);
@@ -31,10 +25,7 @@ export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, st
       aria-valuetext={`${percent.toLocaleString(locale)}%`}
       className={classNames(styles.progress, className)}
       role="progressbar"
-      style={{
-        ...style,
-        backgroundImage: getGradient(progress, PROGRESS_COLOR_VALUE, PROGRESS_COLOR_BACKGROUND),
-      }}
+      style={{ ...style, '--progress': `${100 * progress}%` } as CSSProperties}
       title={`${percent.toLocaleString(locale)}%`}
     />
   );

package/src/components/Rack/Rack.module.scss

@@ -65,12 +65,15 @@
 }
 
 .rack {
+  --tile-size: var(--rack-tile-size);
+
   position: relative;
   display: flex;
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
   transition: var(--transition);
   opacity: 1;
+  font-size: max(14px, calc(var(--rack-tile-size) * 0.6));
 }
 
 .tile {

package/src/components/Rack/Rack.module.scss.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly hidden: string;
+  readonly rack: string;
+  readonly sharpLeft: string;
+  readonly sharpRight: string;
+  readonly tile: string;
+};
+
+export default styles;

package/src/components/Rack/Rack.tsx

@@ -16,9 +16,11 @@ import {
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
-import { LOCALE_FEATURES } from '@/i18n';
-import { createKeyboardNavigation, extractCharacters, extractInputValue, getTileSizes, isCtrl } from '@/lib';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
+import { extractCharacters } from '@/lib/extractCharacters';
+import { extractInputValue } from '@/lib/extractInputValue';
+import { isCtrl } from '@/lib/isCtrl';
 import { rackSlice, selectConfig, selectInputMode, selectLocale, selectRack, useTypedSelector } from '@/state';
 
 import { InputPrompt, RackTile } from './components';
@@ -27,12 +29,10 @@ import { selectRemainingTilesGroups } from './selectors';
 
 interface Props {
   className?: string;
-  tileSize: number;
 }
 
-export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
+export const Rack: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
-  const { rackHeight } = useAppLayout();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
@@ -47,7 +47,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const [hasFocus, setHasFocus] = useState(false);
   const [input, setInput] = useState('');
   const { direction } = LOCALE_FEATURES[locale];
-  const { tileFontSize } = getTileSizes(tileSize);
   const showInputPrompt = inputMode === 'touchscreen' && hasFocus;
   const ref = useRef<HTMLDivElement>(null);
 
@@ -58,7 +57,7 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
 
   useOnclickOutside(() => setHasFocus(false), {
     ignoreClass: [InputPrompt.styles.form, InputPrompt.styles.input],
-    refs: ref.current ? [ref as RefObject<HTMLDivElement>] : [],
+    refs: [ref as RefObject<HTMLDivElement>],
   });
 
   const changeActiveIndex = useCallback(
@@ -158,7 +157,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         })}
         data-testid="rack"
         ref={ref}
-        style={{ fontSize: tileFontSize }}
         onPaste={handlePaste}
       >
         {tiles.map(({ character, tile }, index) => (
@@ -172,7 +170,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
             index={index}
             inputRef={tilesRefs[index]}
             key={index}
-            size={tileSize}
             tile={tile}
             onChange={handleChange}
             onKeyDown={handleKeyDown}
@@ -187,7 +184,7 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
             ref={floatingInputPrompt.refs.setFloating}
             style={{
               position: floatingInputPrompt.strategy,
-              top: floatingInputPrompt.y ? floatingInputPrompt.y - rackHeight : 0,
+              top: floatingInputPrompt.y ? `calc(${floatingInputPrompt.y}px - var(--rack-tile-size))` : 0,
               left: floatingInputPrompt.x ?? 0,
             }}
             value={input}

package/src/components/Rack/components/InputPrompt/InputPrompt.module.scss

@@ -3,6 +3,8 @@
 .form {
   @include focus-effect;
 
+  width: calc(var(--rack-size) * var(--rack-tile-size));
+  height: var(--rack-tile-size);
   border-radius: var(--border--radius);
 }
 

package/src/components/Rack/components/InputPrompt/InputPrompt.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly form: string;
+  readonly input: string;
+};
+
+export default styles;

package/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
 import { rackSlice, selectConfig, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './InputPrompt.module.scss';
@@ -29,7 +28,6 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
   ({ className, style, value, onBlur, onChange, onSubmit, ...props }, ref) => {
     const dispatch = useDispatch();
     const translate = useTranslate();
-    const { rackHeight, rackWidth } = useAppLayout();
     const config = useTypedSelector(selectConfig);
     const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
 
@@ -52,17 +50,7 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
     }, [inputRef]);
 
     return (
-      <form
-        className={classNames(styles.form, className)}
-        ref={ref}
-        style={{
-          width: rackWidth,
-          height: rackHeight,
-          ...style,
-        }}
-        onSubmit={handleSubmit}
-        {...props}
-      >
+      <form className={classNames(styles.form, className)} ref={ref} style={style} onSubmit={handleSubmit} {...props}>
         <input
           autoCapitalize="none"
           autoComplete="off"

package/src/components/Rack/components/InputPrompt/lib.ts

@@ -1,6 +1,6 @@
 import { type Config } from '@scrabble-solver/types';
 
-import { extractCharacters } from '@/lib';
+import { extractCharacters } from '@/lib/extractCharacters';
 
 export const extractRack = (config: Config, value: string): (string | null)[] => {
   const charactersByCase = extractCharacters(config, value, {

package/src/components/Rack/components/RackTile/RackTile.module.scss.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly rackTile: string;
+};
+
+export default styles;

package/src/components/Rack/components/RackTile/RackTile.tsx

@@ -15,7 +15,10 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from '@/lib';
+import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
+import { extractCharacters } from '@/lib/extractCharacters';
+import { extractInputValue } from '@/lib/extractInputValue';
+import { isCtrl } from '@/lib/isCtrl';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -38,7 +41,6 @@ interface Props {
   className?: string;
   index: number;
   inputRef: RefObject<HTMLInputElement | null>;
-  size: number;
   tile: TileModel | null;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
@@ -51,7 +53,6 @@ export const RackTile: FunctionComponent<Props> = ({
   className,
   index,
   inputRef,
-  size,
   tile,
   onChange,
   onKeyDown,
@@ -149,10 +150,10 @@ export const RackTile: FunctionComponent<Props> = ({
       isBlank={character === BLANK}
       isValid={isValid}
       key={index}
+      locale={locale}
       placeholder={translate('rack.placeholder')[index]}
       points={points}
       raised
-      size={size}
       tabIndex={index === 0 ? undefined : -1}
       onChange={handleChange}
       onFocus={handleFocus}

package/src/components/Rack/selectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 
-import { zipCharactersAndTiles } from '@/lib';
+import { zipCharactersAndTiles } from '@/lib/zipCharactersAndTiles';
 import { selectRack, selectResultCandidateTiles } from '@/state';
 
 export const selectRemainingTilesGroups = createSelector(

package/src/components/Radio/Radio.module.scss.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly checked: string;
+  readonly content: string;
+  readonly disabled: string;
+  readonly icon: string;
+  readonly iconContent: string;
+  readonly input: string;
+  readonly radio: string;
+};
+
+export default styles;

package/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type CSSProperties, type FunctionComponent, type ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 import { type TranslationKey } from '@/types';
@@ -12,28 +12,19 @@ interface Props {
   children?: ReactNode;
   className?: string;
   dataTestId?: string;
-  style?: CSSProperties;
   translationKey: TranslationKey;
   tooltip?: string | number;
   value: string | number;
 }
 
-export const Cell: FunctionComponent<Props> = ({
-  children,
-  className,
-  dataTestId,
-  style,
-  translationKey,
-  tooltip,
-  value,
-}) => {
+export const Cell: FunctionComponent<Props> = ({ children, className, dataTestId, translationKey, tooltip, value }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
 
   return (
     <Tooltip tooltip={`${translate(translationKey)}: ${tooltip || formattedValue}`}>
-      <div className={classNames(styles.cell, className)} data-testid={dataTestId} style={style}>
+      <div className={classNames(styles.cell, className)} data-testid={dataTestId}>
         {children || formattedValue}
       </div>
     </Tooltip>

package/src/components/Results/Header.tsx

@@ -1,16 +1,19 @@
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { useColumns } from '@/hooks';
-import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from '@/icons';
-import { RESULTS_COLUMN_WIDTH } from '@/parameters';
+import { useColumns } from '@/hooks/useColumns';
+import GeoAlt from '@/icons/GeoAlt.svg';
+import OneTwoThree from '@/icons/OneTwoThree.svg';
+import Square from '@/icons/Square.svg';
+import SquareA from '@/icons/SquareA.svg';
+import SquareB from '@/icons/SquareB.svg';
+import Squares from '@/icons/Squares.svg';
+import Words from '@/icons/Words.svg';
 import { ResultColumnId } from '@/types';
 
 import { HeaderButton } from './HeaderButton';
 import styles from './Results.module.scss';
 
 export const Header: FunctionComponent = () => {
-  const { resultWordWidth } = useAppLayout();
   const columns = useColumns();
 
   return (
@@ -20,18 +23,12 @@ export const Header: FunctionComponent = () => {
           className={styles.coordinates}
           Icon={GeoAlt}
           id={ResultColumnId.Coordinates}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Coordinates] }}
           translationKey="settings.showCoordinates"
         />
       )}
 
       {columns[ResultColumnId.Word] && (
-        <HeaderButton
-          className={styles.word}
-          id={ResultColumnId.Word}
-          style={{ flexBasis: resultWordWidth }}
-          translationKey="common.word"
-        />
+        <HeaderButton className={styles.word} id={ResultColumnId.Word} translationKey="common.word" />
       )}
 
       {columns[ResultColumnId.TilesCount] && (
@@ -39,7 +36,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Squares}
           id={ResultColumnId.TilesCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.TilesCount] }}
           translationKey="common.tiles"
         />
       )}
@@ -49,7 +45,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={SquareA}
           id={ResultColumnId.VowelsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.VowelsCount] }}
           translationKey="common.vowels"
         />
       )}
@@ -59,7 +54,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={SquareB}
           id={ResultColumnId.ConsonantsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.ConsonantsCount] }}
           translationKey="common.consonants"
         />
       )}
@@ -69,7 +63,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Square}
           id={ResultColumnId.BlanksCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.BlanksCount] }}
           translationKey="common.blanks"
         />
       )}
@@ -79,7 +72,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Words}
           id={ResultColumnId.WordsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.WordsCount] }}
           translationKey="common.words"
         />
       )}
@@ -89,7 +81,6 @@ export const Header: FunctionComponent = () => {
           className={styles.points}
           Icon={OneTwoThree}
           id={ResultColumnId.Points}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Points] }}
           translationKey="common.points"
         />
       )}

package/src/components/Results/HeaderButton.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
-import { type CSSProperties, type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
+import { type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { SortDown, SortUp } from '@/icons';
+import SortDown from '@/icons/SortDown.svg';
+import SortUp from '@/icons/SortUp.svg';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from '@/state';
 import { type ResultColumnId, SortDirection, type TranslationKey } from '@/types';
 
@@ -15,10 +16,9 @@ interface Props {
   Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
   id: ResultColumnId;
   translationKey: TranslationKey;
-  style?: CSSProperties;
 }
 
-export const HeaderButton = ({ className, Icon, id, translationKey, style }: Props): ReactElement => {
+export const HeaderButton = ({ className, Icon, id, translationKey }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const sort = useTypedSelector(selectResultsSort);
@@ -32,7 +32,6 @@ export const HeaderButton = ({ className, Icon, id, translationKey, style }: Pro
       <button
         aria-label={translate(translationKey)}
         className={classNames(styles.headerButton, className)}
-        style={style}
         type="button"
         onClick={handleClick}
       >

package/src/components/Results/Result.tsx

@@ -3,10 +3,9 @@ import { type FocusEventHandler, type MouseEventHandler, type ReactElement, useR
 import Highlighter from 'react-highlight-words';
 import { type RowComponentProps } from 'react-window';
 
-import { useAppLayout } from '@/app-layout';
-import { useColumns } from '@/hooks';
-import { LOCALE_FEATURES } from '@/i18n';
-import { noop } from '@/lib';
+import { useColumns } from '@/hooks/useColumns';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { noop } from '@/lib/noop';
 import {
   selectIsResultMatching,
   selectLocale,
@@ -28,10 +27,8 @@ export const Result = ({
   onClick = noop,
   onFocus = noop,
   onMouseEnter = noop,
-  onMouseLeave = noop,
   style,
 }: RowComponentProps<ResultData>): ReactElement => {
-  const { resultWordWidth } = useAppLayout();
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
@@ -44,7 +41,6 @@ export const Result = ({
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
   const handleMouseEnter: MouseEventHandler = (event) => onMouseEnter(result, event);
-  const handleMouseLeave: MouseEventHandler = (event) => onMouseLeave(result, event);
   const handleBlur: FocusEventHandler = (event) => onBlur(result, event);
   const handleFocus: FocusEventHandler = (event) => onFocus(result, event);
 
@@ -55,7 +51,6 @@ export const Result = ({
       aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
-        [styles.notMatching]: !isMatching,
       })}
       data-testid="result"
       ref={ref}
@@ -65,7 +60,6 @@ export const Result = ({
       onClick={handleClick}
       onFocus={handleFocus}
       onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
         {columns[ResultColumnId.Coordinates] && (
@@ -73,12 +67,7 @@ export const Result = ({
         )}
 
         {columns[ResultColumnId.Word] && (
-          <Cell
-            className={styles.word}
-            style={{ flexBasis: resultWordWidth }}
-            translationKey="common.word"
-            value={result.word}
-          >
+          <Cell className={styles.word} translationKey="common.word" value={result.word}>
             <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
           </Cell>
         )}

package/src/components/Results/Results.module.scss

@@ -93,7 +93,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   @include button-reset;
 
   user-select: none;
-  transition: var(--transition);
   cursor: pointer;
   font-weight: 400;
 
@@ -146,14 +145,11 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     justify-content: flex-start;
     padding-inline-start: $row-padding-horizontal;
   }
-
-  &:last-child {
-    flex: 1;
-  }
 }
 
 .word {
-  flex: 0 0;
+  flex: 1 1 0;
+  min-width: 0;
   text-transform: uppercase;
 }
 
@@ -168,7 +164,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 .points {
   $width: 80px;
 
-  flex: 1 0 $width;
+  flex: 0 0 $width;
+  max-width: $width;
   font-weight: bold;
 }