fix truncating spacing issue

[Gkrumbach07]

closes: #2127

Description

From investigation. this problem is stemming from truncate adding on a min width of 12ch which for small placeholders like None will cause a gap.

Truncate should not have to be used because the dropdown text should truncate by default. The issue is that when this dropdown is in a Form(thats a PF form component) a grid styling is applied. For some reason the grid styling messes with the width and anything under a grid doesn't obey the bounds of the grid. Switching to (a) not using PF's Form or (b) setting the forms display to block will fix the overflow issue.

I boiled it down to the very basics and still have no luck fixing it at the root. This seems like a PF bug at its core becuase i can reproduce it in a very basic test bed like this

<div styles={{maxWidth: 100px}}>
   <Form>
      <Dropdown
        toggle={
          <DropdownToggle>
            DropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdownDropdown
          </DropdownToggle>
        }
        dropdownItems={[]}
      />
    </Form>
</div>

How Has This Been Tested?

open add model modal and look at select serving runtime dropdown (or anywhere that uses this dropdown select component)

Test Impact

no tests needed, a visual bug fig

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Commits have been squashed into descriptive, self-contained units of work (e.g. 'WIP' and 'Implements feedback' style messages have been removed)
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit tests & storybook for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change (find relevant UX in the SMEs section).
  not needed bc this is for fixing an improper ux

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: andrewballantyne

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [andrewballantyne]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[andrewballantyne]

/override ci/prow/images
/override ci/prow/odh-dashboard-pr-image-mirror

Quay is down, overriding the image building.

[openshift-ci]

@andrewballantyne: Overrode contexts on behalf of andrewballantyne: ci/prow/images, ci/prow/odh-dashboard-pr-image-mirror

In response to this:

/override ci/prow/images
/override ci/prow/odh-dashboard-pr-image-mirror

Quay is down, overriding the image building.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.