From 417cdf7ce31b03edd76e039bfd950712c97798bc Mon Sep 17 00:00:00 2001
From: phillimorland <5871230+phillimorland@users.noreply.github.com>
Date: Wed, 23 Nov 2022 15:56:12 +0100
Subject: [PATCH] budgeting/ListItemBadges: rm spaced span as produced empty
 elements and replaced span badges with div badges

---
 meinberlin/apps/budgeting/assets/ListItemBadges.jsx  |  9 ++++-----
 meinberlin/apps/budgeting/assets/SpacedSpan.jsx      | 12 ------------
 .../budgeting/assets/__tests__/SpacedSpan.jest.jsx   | 10 ----------
 meinberlin/assets/scss/components/_list_item.scss    |  2 ++
 4 files changed, 6 insertions(+), 27 deletions(-)
 delete mode 100644 meinberlin/apps/budgeting/assets/SpacedSpan.jsx
 delete mode 100644 meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx

diff --git a/meinberlin/apps/budgeting/assets/ListItemBadges.jsx b/meinberlin/apps/budgeting/assets/ListItemBadges.jsx
index cf8f5817b8..5d87df307d 100644
--- a/meinberlin/apps/budgeting/assets/ListItemBadges.jsx
+++ b/meinberlin/apps/budgeting/assets/ListItemBadges.jsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { SpacedSpan } from './SpacedSpan'
 import django from 'django'
 
 const translated = {
@@ -30,24 +29,24 @@ export const ListItemBadges = props => {
     <div className="list-item__labels">
       {props.badges.map((badge, idx) => {
         return (
-          <SpacedSpan
+          <div
             key={'badge_' + idx}
             className={getClass(badge)}
           >
             {hasPointLabelIcon(badge[0])}
             {badge[1]}
-          </SpacedSpan>
+          </div>
         )
       })}
       {props.numOfMoreBadges > 0 &&
-        <SpacedSpan className="label__link label--big">
+        <div className="label__link label--big">
           <a
             href={props.proposalUrl}
             className="list-item__link"
           >
             {props.numOfMoreBadges + ' ' + translated.more}
           </a>
-        </SpacedSpan>}
+        </div>}
     </div>
   )
 }
diff --git a/meinberlin/apps/budgeting/assets/SpacedSpan.jsx b/meinberlin/apps/budgeting/assets/SpacedSpan.jsx
deleted file mode 100644
index eca5f83863..0000000000
--- a/meinberlin/apps/budgeting/assets/SpacedSpan.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-
-export const SpacedSpan = ({ className, children }) => {
-  return (
-    <>
-      <span> </span>
-      <span className={className}>
-        {children}
-      </span>
-    </>
-  )
-}
diff --git a/meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx b/meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx
deleted file mode 100644
index d85240bc59..0000000000
--- a/meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { SpacedSpan } from '../SpacedSpan'
-
-test('displaying spaced span', () => {
-  const tree = render(<SpacedSpan>word</SpacedSpan>)
-  // screen.debug()
-  const firstSpaceSpan = tree.container.querySelector('span')
-  expect(firstSpaceSpan.innerHTML).toBe(' ')
-})
diff --git a/meinberlin/assets/scss/components/_list_item.scss b/meinberlin/assets/scss/components/_list_item.scss
index 71065e00df..6769f34e43 100644
--- a/meinberlin/assets/scss/components/_list_item.scss
+++ b/meinberlin/assets/scss/components/_list_item.scss
@@ -69,7 +69,9 @@
     @include clearfix;
     margin: 0 0 0.4rem;
 
+    > div.label,
     > span.label {
+        margin-left: 0.2 * $spacer;
         overflow: hidden;
         max-width: 40ch;
         text-overflow: ellipsis;