set width of dropdown select items for Network Offering

[DaanHoogland]

set width of dropdown select items for Network Offering during add tier dialog

Description

This PR is kind of experimental but, ...

Fixes: #11861

Types of changes

• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] New feature (non-breaking change which adds functionality)
• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] Enhancement (improves an existing feature and functionality)
• [ ] Cleanup (Code refactoring and cleanup, that may add test cases)
• [ ] Build/CI
• [ ] Test (unit or integration test code)

Feature/Enhancement Scale or Bug Severity

Feature/Enhancement Scale

• [ ] Major
• [x] Minor

Bug Severity

• [ ] BLOCKER
• [ ] Critical
• [ ] Major
• [x] Minor
• [ ] Trivial

Screenshots (if appropriate):

How Has This Been Tested?

How did you try to break this feature and the system with this change?

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 17.46%. Comparing base (51910cd) to head (9cd5d06). :warning: Report is 1 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main   #11899      +/-   ##
============================================
- Coverage     17.46%   17.46%   -0.01%     
- Complexity    15515    15516       +1     
============================================
  Files          5913     5913              
  Lines        529371   529371              
  Branches      64670    64670              
============================================
- Hits          92450    92448       -2     
- Misses       426503   426504       +1     
- Partials      10418    10419       +1     

Flag	Coverage Δ
uitests	3.58% <ø> (ø)
unittests	18.52% <ø> (-0.01%)	:arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kiranchavala]

@blueorangutan ui

[kiranchavala]

@DaanHoogland

A little bit better.

Can the entire description be displayed

"Offering for Isolated Vpc networks with Source Nat service enabled and LB service Disabled"

[shwstppr]

@DaanHoogland I feel a bit more elegant way could be showing a tooltip when the item is hovered,

diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index 4f6aaef444..7fe706daba 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -194,7 +194,11 @@
               :filterOption="(input, option) => {
                 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }" >
-              <a-select-option v-for="item in networkOfferings" :key="item.id" :value="item.id" :label="item.displaytext || item.name || item.description">
+              <a-select-option
+                v-for="item in networkOfferings"
+                :key="item.id"
+                :value="item.id"
+                :title="item.displaytext || item.name || item.description">
                 {{ item.displaytext || item.name || item.description }}
               </a-select-option>
             </a-select>

[DaanHoogland]

@blueorangutan ui

[blueorangutan]

@DaanHoogland a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

[blueorangutan]

UI build: :heavy_check_mark: Live QA URL: https://qa.cloudstack.cloud/simulator/pr/11899 (QA-JID-826)

[DaanHoogland]

@kiranchavala @shwstppr, can you have another look?