* CRDB-2271: Truncating long queries with CSS

Applying a tried and true hack using `-webkit-line-clamp` to truncate
queries in the statements table to a couple of lines followed by an
ellipsis. To allow a longer preview, I am applying the same fix to the
tooltip, but clamping the lines to 15 (there were around 30 characters
per line and design asked for ~425 characters. It's close enough).

* Adding truncation to Transactions table

Since statements and transactions have enough variation to not be able
to make this change at the common table level, I'm adding truncation to
the transactions table styles to mirror the change in the statements
page table.

* Adding trucation to Statement col in Sessions

Adding trucation to the Statements column on the Sessions page to be
consistent with how statements appear on Statements and Tranactions
pages.

* Truncating long app names in Statements app filter

If a very long name is displayed in the Statements application filter,
the name may cause the dropdown to extend outside of the view or at
least beyond the table and cause excessive horizontal scrolling. To
correct this I have added the `nowrap` option to the `<Text>` component
inside of the Dropdown trigger. The "nowrap" prop will constrain the the
text to a single line but does not offer a constraint for the width. To
constrain the width I have added a local style set to a max-width of
`75ch` (75 characters wide).

Just a note, that I have used this opportunity to bring in the `<Text>`
from `ui-components` to replace the local one here, which was the
inspiration for the common component.

The width and display of the menu are controlled by the Dropdown
component and I didn't want to alter the display of all dropdowns that
use that component. So instead I extended the dropdown component to take
an additional `itemsClassname` prop to apply a class name to the element
rendered for the menu items. This way I can supply another local style
to constrain the width of the menu (to `80ch`) and apply text
truncation.

* Replacing repetitive styles with Sass mixins

DRYing up the code a little with two Sass mixins: text-overflow and
line-clamp.

* CRDB-2271: Truncating long queries with CSS

Applying a tried and true hack using `-webkit-line-clamp` to truncate
queries in the statements table to a couple of lines followed by an
ellipsis. To allow a longer preview, I am applying the same fix to the
tooltip, but clamping the lines to 15 (there were around 30 characters
per line and design asked for ~425 characters. It's close enough).

* Adding truncation to Transactions table

Since statements and transactions have enough variation to not be able
to make this change at the common table level, I'm adding truncation to
the transactions table styles to mirror the change in the statements
page table.

* Adding trucation to Statement col in Sessions

Adding trucation to the Statements column on the Sessions page to be
consistent with how statements appear on Statements and Tranactions
pages.

* Truncating long app names in Statements app filter

If a very long name is displayed in the Statements application filter,
the name may cause the dropdown to extend outside of the view or at
least beyond the table and cause excessive horizontal scrolling. To
correct this I have added the `nowrap` option to the `<Text>` component
inside of the Dropdown trigger. The "nowrap" prop will constrain the the
text to a single line but does not offer a constraint for the width. To
constrain the width I have added a local style set to a max-width of
`75ch` (75 characters wide).

Just a note, that I have used this opportunity to bring in the `<Text>`
from `ui-components` to replace the local one here, which was the
inspiration for the common component.

The width and display of the menu are controlled by the Dropdown
component and I didn't want to alter the display of all dropdowns that
use that component. So instead I extended the dropdown component to take
an additional `itemsClassname` prop to apply a class name to the element
rendered for the menu items. This way I can supply another local style
to constrain the width of the menu (to `80ch`) and apply text
truncation.

* Replacing repetitive styles with Sass mixins

DRYing up the code a little with two Sass mixins: text-overflow and
line-clamp.

* CRDB-2271: Truncating long queries with CSS

Applying a tried and true hack using `-webkit-line-clamp` to truncate
queries in the statements table to a couple of lines followed by an
ellipsis. To allow a longer preview, I am applying the same fix to the
tooltip, but clamping the lines to 15 (there were around 30 characters
per line and design asked for ~425 characters. It's close enough).

* Adding truncation to Transactions table

Since statements and transactions have enough variation to not be able
to make this change at the common table level, I'm adding truncation to
the transactions table styles to mirror the change in the statements
page table.

* Adding trucation to Statement col in Sessions

Adding trucation to the Statements column on the Sessions page to be
consistent with how statements appear on Statements and Tranactions
pages.

* Truncating long app names in Statements app filter

If a very long name is displayed in the Statements application filter,
the name may cause the dropdown to extend outside of the view or at
least beyond the table and cause excessive horizontal scrolling. To
correct this I have added the `nowrap` option to the `<Text>` component
inside of the Dropdown trigger. The "nowrap" prop will constrain the the
text to a single line but does not offer a constraint for the width. To
constrain the width I have added a local style set to a max-width of
`75ch` (75 characters wide).

Just a note, that I have used this opportunity to bring in the `<Text>`
from `ui-components` to replace the local one here, which was the
inspiration for the common component.

The width and display of the menu are controlled by the Dropdown
component and I didn't want to alter the display of all dropdowns that
use that component. So instead I extended the dropdown component to take
an additional `itemsClassname` prop to apply a class name to the element
rendered for the menu items. This way I can supply another local style
to constrain the width of the menu (to `80ch`) and apply text
truncation.

* Replacing repetitive styles with Sass mixins

DRYing up the code a little with two Sass mixins: text-overflow and
line-clamp.