fix: list elements collapsing

* fix list elements collapsing
* make random color values more distinct
* fix problem with tag element keys

snowpack.config.js

@@ -5,11 +5,10 @@ module.exports = {
     src: { url: '/dist' },
   },
   plugins: [
-    '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-dotenv',
+    '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-typescript',
     '@snowpack/plugin-postcss',
-    '@snowpack/plugin-dotenv',
   ],
   routes: [
     /* Enable an SPA Fallback in development: */

src/components/Form/TagInput.tsx

@@ -80,7 +80,7 @@ const TagInput: React.FC<Props> = ({ label, tags, options, onTagsChange, require
         <div className="flex flex-wrap items-center flex-1 p-2">
           {tags.map((selectedTag) => (
             <Tag
-              key={`selected${selectedTag.id}`}
+              key={`selected${selectedTag.color}`}
               onClickDelete={() => handleClickDeleteTag(selectedTag)}
               color={selectedTag.color}
             >

src/components/Map/MapLayerControl.tsx

@@ -18,7 +18,7 @@ const MapLayerControl: React.FC = () => {
   };
 
   return (
-    <div className="border-2 border-black w-48 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
+    <div className="border-2 border-black w-52 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
       <div className={`flex justify-between cursor-pointer ${isOpen ? 'mb-2' : ''}`} onClick={() => setIsOpen(!isOpen)}>
         <h3 className="text-base font-semibold text-gray-900">Kategorien:</h3>
         <DownIcon
@@ -28,7 +28,7 @@ const MapLayerControl: React.FC = () => {
       {isOpen &&
         layers.map((layer) => {
           return (
-            <div key={layer}>
+            <div key={layer} className="my-2">
               <label className="inline-flex items-center">
                 <input
                   type="checkbox"

src/components/Sidebar/ListElement.tsx

@@ -16,7 +16,7 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
         {...restProps}
         className={`border-2 border-black border-opacity-20 ${
           hovered ? 'border-opacity-40' : 'hover:border-opacity-40'
-        } cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2`}
+        } cursor-pointer rounded-lg mx-4 my-2`}
       >
         <div className="p-3">
           <h2 className="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">

src/util/color.ts

-export function generateRandomHslColor(saturation = 100, lightness = 50): string {
-  const randomHue = getRandomIntInclusive(0, 360);
-  const color = `hsl(${randomHue},${saturation}%,${lightness}%)`;
+export function generateRandomHslColor(saturation = 100, lightness = 50, distinctValues = 20): string {
+  const randomColorIndex = getRandomIntInclusive(0, distinctValues);
+  const color = `hsl(${Math.floor(randomColorIndex * (360 / distinctValues))},${saturation}%,${lightness}%)`;
   return color;
 }