Fix horizontal overflow for glossary lookup (#445)

* Fix Overflow for Labs Glossary

* Add story to glossary lookup and report labs observation

frontend/src/app/components/glossary-lookup/glossary-lookup.component.scss

@@ -2,4 +2,5 @@
   max-height:300px;
   overflow-y:scroll;
   display: inline-block;
+  max-width: 100%;
 }

frontend/src/app/components/glossary-lookup/glossary-lookup.stories.ts

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import {GlossaryLookupComponent} from "./glossary-lookup.component";
-import {applicationConfig, moduleMetadata} from "@storybook/angular";
-import { DecoratorFunction, StoryContext } from '@storybook/types';
+import {componentWrapperDecorator, moduleMetadata} from "@storybook/angular";
+import { DecoratorFunction } from '@storybook/types';
 import {HttpClient, HttpClientModule} from "@angular/common/http";
-import {BrowserModule} from "@angular/platform-browser";
 import {Observable, of} from "rxjs";
 import {HTTP_CLIENT_TOKEN} from "../../dependency-injection";
 
@@ -15,7 +14,6 @@ import {HTTP_CLIENT_TOKEN} from "../../dependency-injection";
 
 const withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
   const { httpClientResp } = context.parameters;
-  let { code, codeSystem } = context.args;
   // uses `moduleMetadata` decorator to cleanly add locale provider into module metadata
 
   // It is also possible to do it directly in story with
@@ -54,12 +52,8 @@ const meta: Meta<GlossaryLookupComponent> = {
   decorators: [
     withHttpClientProvider,
     moduleMetadata({
-      imports: [BrowserModule, HttpClientModule],
+      imports: [HttpClientModule],
     }),
-    // applicationConfig({
-    //   // imports: [BrowserModule, HttpClientModule],
-    //   providers: [{ provide: FastenApiService, useValue: MockFastenApiService }],
-    // }),
   ],
   tags: ['autodocs'],
   render: (args: GlossaryLookupComponent) => ({
@@ -143,6 +137,13 @@ export const Html: Story = {
   }
 };
 
+// Wrap in small width div to verify that text doesn't overflow horizontally. Border included to make it easier to verify overflow.
+export const HorizontalOverflow: Story = {
+  args: Html.args,
+  parameters: Html.parameters,
+  decorators: [componentWrapperDecorator((story) => `<div style="width: 300px; border-style: solid">${story}</div>`)]
+};
+
 // More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
 export const Empty: Story = {
 };

frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { DecoratorFunction } from '@storybook/types';
+import { ReportLabsObservationComponent } from './report-labs-observation.component'
+import { PipesModule } from 'src/app/pipes/pipes.module';
+import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
+import { ResourceFhir } from 'src/app/models/fasten/resource_fhir';
+import { GlossaryLookupComponent } from '../glossary-lookup/glossary-lookup.component';
+import { NgChartsModule } from 'ng2-charts';
+import { HTTP_CLIENT_TOKEN } from 'src/app/dependency-injection';
+import { HttpClient, HttpClientModule, HttpHandler } from '@angular/common/http';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Observable, of } from 'rxjs';
+
+import R4Example1Json from "../../../lib/fixtures/r4/resources/observation/example1.json";
+import { Html as GlossaryLookupHtml } from '../glossary-lookup/glossary-lookup.stories';
+
+
+const withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
+  const { httpClientResp } = context.parameters;
+
+  class MockHttpClient extends HttpClient {
+
+    get(): Observable<any> {
+      return of(httpClientResp)
+    }
+  }
+
+  return moduleMetadata({ providers: [{ provide: HTTP_CLIENT_TOKEN, useClass: MockHttpClient }] })(
+    storyFunc,
+    context
+  );
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<ReportLabsObservationComponent> = {
+  title: 'Components/ReportLabsObservation',
+  component: ReportLabsObservationComponent,
+  decorators: [
+    withHttpClientProvider,
+    moduleMetadata({
+      imports: [PipesModule, GlossaryLookupComponent, NgChartsModule, RouterTestingModule, HttpClientModule],
+      declarations: [NgbCollapse],
+      providers: [],
+    })
+  ],
+  tags: ['autodocs'],
+  render: (args: ReportLabsObservationComponent) => ({
+    props: {
+      backgroundColor: null,
+      ...args,
+    },
+  }),
+  argTypes: {
+    observations: {
+      control: 'array'
+    },
+    observationCode: {
+      control: 'string'
+    },
+    observationTitle: {
+      control: 'string'
+    },
+  },
+};
+
+
+export default meta;
+type Story = StoryObj<ReportLabsObservationComponent>;
+
+const observation: ResourceFhir = {
+  source_id: '',
+  source_resource_id: '',
+  source_resource_type: 'Observation',
+  fhir_version: '4',
+  sort_title: 'sort',
+  sort_date: new Date(),
+  resource_raw: R4Example1Json,
+};
+
+const observation2: ResourceFhir = {
+  source_id: '',
+  source_resource_id: '',
+  source_resource_type: 'Observation',
+  fhir_version: '4',
+  sort_title: 'sort',
+  sort_date: new Date(),
+  resource_raw: R4Example1Json,
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
+export const Entry: Story = {
+  args: {
+    observations: [observation, observation2],
+    observationCode: '788-0',
+    observationTitle: 'Erythrocyte distribution width [Ratio] by Automated count',
+  },
+  parameters: {
+    ...GlossaryLookupHtml.parameters
+  }
+};