fix: table with ticket details is not responsive in phone

[divyamtayal]

Fixes #3511

Short description of what this resolves:

Ticket table was breaking in mobile responsive view when one of the ticket type is donation ticket.
Compare - https://open-event-frontend.now.sh/e/a315169f (in mobile view)

Changes proposed in this pull request:

• Removed an empty column after type and added after price.
• Removed class for input for donation tickets which was producing bug.

Before

(with Donation tickets)

(without Donation tickets)

After

(with Donation tickets)

(without Donation tickets)

(other screenshots for different screen size)

Checklist

• I have read the Contribution & Best practices Guide.
• My branch is up-to-date with the Upstream development branch.
• The acceptance, integration, unit tests and linter pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/eventyay/open-event-frontend/lo6v10bst
✅ Preview: https://open-event-frontend-git-ticket-table-resp-3511.eventyay.now.sh

[divyamtayal]

@iamareebjamal Please see the changes I have made and let me know to make any changes further.
This looks good to me. as now in every possibly situation ticket Table is responsive and nicely aligned.

[codecov]

Codecov Report

Merging #5662 (060859f) into development (70c2285) will decrease coverage by 0.05%.
The diff coverage is n/a.

@@               Coverage Diff               @@
##           development    #5662      +/-   ##
===============================================
- Coverage        23.62%   23.57%   -0.06%     
===============================================
  Files              510      510              
  Lines             5417     5417              
  Branches            59       59              
===============================================
- Hits              1280     1277       -3     
- Misses            4121     4124       +3     
  Partials            16       16              

Impacted Files	Coverage Δ
app/components/tabbed-navigation.js	33.33% <0.00%> (-20.00%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 70c2285...060859f. Read the comment docs.

[divyamtayal]

@iamareebjamal PLease see the changes

[maze-runnar]

Not working -

[divyamtayal]

Not working -

@iamareebjamal @maze-runnar I want to know till which point or min-width for which it should not break.

[divyamtayal]

@iamareebjamal @maze-runnar Plese let me know
can we just not display subtotal field in mobile view bcz otherwise the table looks so untidy and I think subtotal field could be removed and will not disturb the logic or user exp for user and also not displaying subtotal field leads to easy repressiveness of table.

[iamareebjamal]

Subtotal is important, reaarange price field for donation ticket

[divyamtayal]

Not working -

@iamareebjamal @maze-runnar I want to know till which point or min-width for which it should not break.

??

[iamareebjamal]

Smallest width device preset in your browser

[divyamtayal]

@iamareebjamal I found this to be a nice way in mobile device making tables stackable. What do you want to say about this?

I think with this we are getting all the information without compromising the space and looks tidy

[iamareebjamal]

Looks good

[divyamtayal]

Looks good

@iamareebjamal further more changes?

[divyamtayal]

.