feat: allow tables to be scrolled horizontally with ease in Admin

[hgaol]

fix #917 , I just blindly set the min-width of post column to 15rem, pls let me know if any comment. ++@shuashuai to help to review. Thanks!

[shuashuai]

Thanks for the contribution！

There are several pages here that need to be adjusted at the same time：

1. ui/src/pages/Admin/Answers/index.tsx
2. ui/src/pages/Admin/Qustions/index.tsx
3. ui/src/pages/Timeline/index.tsx

I just blindly set the min-width of post column to 15rem

Other cells also need to set a minimum width. The width only needs to match the title content of the cell, the main content can be appropriately widened. This can be achieved through inline styles or adding classes.

If you have any other questions, you can continue the discussion and I will do my best to help you.

[hgaol]

Thanks @shuashuai ! Sry I'm not quite good at CSS. I found that when I shrink the width of the page, or just set a very small width of the table or table cell, it doesn't take effect. And the width of the column looks like is what you want, matching the title content of the cell. e.g.

Do you know why and should I continue to set the min-width to adjust the other title content? And how...

Back to the main content, do you mean the 'Post' column? What about 20rem, or any other suggested value? Thanks a lot!

[shuashuai]

@hgaol

Back to the main content, do you mean the 'Post' column? What about 20rem, or any other suggested value?

yes, I think 15rem is more suitable！

Note that in the /admin/answers page, the post width will also be determined by div.text-truncate-2, you can see here

you need to modify the size through media query：

1. first add an index.scss file, then reference the file within the page `import './index.scss';
2. add the following code
   
3. div.text-truncate-2 add class 'max-w-30' and remove inline style
   

Do you know why and should I continue to set the min-width to adjust the other title content? And how...

What I mean is to try to avoid title being compressed. this can be achieved simply，you can avoid this by adding the class name text-nowrap, eg:

The final effect looks like this:

[hgaol]

updated, could you help to review, thx! @shuashuai

[shuashuai]

Thanks!