Extend IdeaDropTarget to allow custom tagName

  - shift default from section -> div
    - this shift caused a styling regression for overflowed list within the CategoryColumn, due to us using the 'section' css selector, which may have once been necessary for specificity (overriding semantic ui's default styles), but we safely removed this selector, as the classname selector that it was paired with does the trick on its own

test/components/idea_drop_target_test.js

@@ -11,9 +11,31 @@ describe("IdeaDropTarget", () => {
   const defaultProps = {
     onDropOfIdea: () => {},
     dragAndDropHandlersActive: true,
-
   }
 
+  it("renders a div wrapping element by default", () => {
+    wrapper = shallow(
+      <IdeaDropTarget
+        {...defaultProps}
+      />
+    )
+
+    expect(wrapper.html()).to.match(/^<div /)
+  })
+
+  context("when a tagName is specified", () => {
+    it("renders the wrapping element with the specified tagName", () => {
+      wrapper = shallow(
+        <IdeaDropTarget
+          {...defaultProps}
+          tagName="li"
+        />
+      )
+
+      expect(wrapper.html()).to.match(/^<li /)
+    })
+  })
+
   context("when dragAndDropHandlersActive is true", () => {
     it("applies drag and drop handlers", () => {
       wrapper = shallow(

web/static/js/components/css_modules/category_column.css

@@ -1,6 +1,6 @@
 @import '../../../css/colors.css';
 
-:global(section.column).index {
+:global(.column).index {
   --inner-column-padding: 0.75rem;
   &:first-of-type { padding-right: var(--inner-column-padding) !important; }
   &:last-of-type { padding-left: var(--inner-column-padding) !important; }

web/static/js/components/idea_drop_target.jsx

@@ -36,7 +36,7 @@ export class IdeaDropTarget extends Component {
 
   render() {
     const { handleDragOver, handleDrop, handleDragLeave, props, state } = this
-    const { children, wrapperClassName, dragAndDropHandlersActive } = props
+    const { tagName, children, wrapperClassName, dragAndDropHandlersActive } = props
 
     const className = classNames(wrapperClassName, {
       "dragged-over": state.draggedOver,
@@ -48,26 +48,31 @@ export class IdeaDropTarget extends Component {
       onDrop: handleDrop,
     } : {}
 
+    // React requires a Capitalized constant
+    const WrappingElement = tagName
+
     return (
-      <div
+      <WrappingElement
         className={className}
         {...dragAndDropHandlers}
       >
         {children}
         <span className="overlay" />
-      </div>
+      </WrappingElement>
     )
   }
 }
 
 IdeaDropTarget.propTypes = {
-  onDropOfIdea: PropTypes.func.isRequired,
   dragAndDropHandlersActive: PropTypes.bool,
+  onDropOfIdea: PropTypes.func.isRequired,
+  tagName: PropTypes.string,
   wrapperClassName: PropTypes.string,
 }
 
 IdeaDropTarget.defaultProps = {
   dragAndDropHandlersActive: true,
+  tagName: "div",
   wrapperClassName: "",
 }